@baroman4ik

Как дождаться выполнения асинхронной функции для изменения стейта в React?

есть асинхронный метод, который получает дату и есть стейт-массив, от которого зависит отрисовка всего другого. как дождаться ответа от getData в данном случае?

const App = async () => {
  const [noteArr, setNoteArr] = useState([])
  setNoteArr(getData())
  useEffect(() => {
    return () => {
      console.log(noteArr);
    };
  }, [noteArr]);
  return (
    <div className="App">
      <NoteInfo/>
      <NoteList noteArr={noteArr} setNoteArr={setNoteArr}/>
    </div>
  );
}
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
@Denioo
Асинхронные функции должны вызываться в useEffect в таком случае. Поместите setNoteArr(getData()) в useEffect с пустыми зависимостями [] и он будет вызываться при монтировании компонента.

Вообще ваш компонент должен выглядеть так:

const App = () => {
  const [noteArr, setNoteArr] = useState([])

useEffect(() => {
    (async () => {
    const result = await getData();
setNoteArr(result);
   })()
  }, []);

  useEffect(() => {
    return () => {
      console.log(noteArr);
    };
  }, [noteArr]);
  return (
    <div className="App">
      <NoteInfo/>
      <NoteList noteArr={noteArr} setNoteArr={setNoteArr}/>
    </div>
  );
}


Тогда все будет работать как надо и читаемость улучшится
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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