@lexstile

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

Есть код:
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]);
  • Вопрос задан
  • 49 просмотров
Решения вопроса 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();
  }, []);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы