Как вызвать функцию только после обновления state в useEffect?

Question

[lexstile]

Есть код:

const [filters, setFilters] = useState({});

  const filterByRedColor = () => {
    const apiUrl = `/api/?colorId=${filters.colors.red}`;
    callApi(apiUrl);
  };

  useEffect(() => {
    const asyncData = async () => {
      const data = await getFilters();
      setFilters(data);
      filterByRedColor(); // при добавлении 2-го useEffect эту строку убираю
    };
    asyncData();
  }, []);

Внутри filterByRedColor используется state. Но при первом открытии страницы там пустой объект и приложение падает.
Как лучше выйти из положения?
Я пробую, добавляя еще один эффект:

useEffect(() => {
    Object.keys(filters).length && filterByRedColor();
  }, [filters]);

Comments

[G F]

А что мешает передать аргумент в filterByRedColor?

[lexstile]

G F, так и хотел, но по условиям задачи нужно через state.

Answer 1

[glazzkoff]

Можно просто передать данные в параметры функции:

const [filters, setFilters] = useState({});

  const filterByRedColor = (data) => {
    const apiUrl = `/api/?colorId=${data.colors.red}`;
    callApi(apiUrl);
  };

  useEffect(() => {
    const asyncData = async () => {
      const data = await getFilters();
      setFilters(data);
      filterByRedColor(data);
    };
    asyncData();
  }, []);

Comments

[lexstile]

Можно, но по условиям задачи нужно через state, к сожалению.

[glazzkoff]

Тогда думаю можно попробовать через второй useEffect, который будет зависеть от filters:

const [filters, setFilters] = useState();

  const filterByRedColor = () => {
    const apiUrl = `/api/?colorId=${filters.colors.red}`;
    callApi(apiUrl);
  };

  useEffect(() => {
    const asyncData = async () => {
      const data = await getFilters();
      setFilters(data);
    };
    asyncData();
  }, []);

  useEffect(() => {
    if (filters) {
      filterByRedColor();
    }
  }, [filters]);

[lexstile]

glazzkoff, пока так и оставил, благодарю.