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

Question

[baroman4ik]

есть асинхронный метод, который получает дату и есть стейт-массив, от которого зависит отрисовка всего другого. как дождаться ответа от 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>
  );
}

Comments

[WbICHA]

А ничего, что ты изменяешь стейт внутри тела компонента?

Answer 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>
  );
}

Тогда все будет работать как надо и читаемость улучшится

Answer 2

[Дмитрий Воробьев]

Ваш ответ не совсем корректен, так как данный способ не заставляет дожидаться выполнения асинхронной функции, если поставите debagger слазу после

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

то вы сможете убедиться что noteArr = []