Установка состояния после загрузки данных на useEffect - PullRequest
Новая
       1

Установка состояния после загрузки данных на useEffect

0 голосов
/ 03 июля 2019

Попытка обновить состояние после загрузки данных на useEffect.Возможность обновления локальной переменной, но не состояния.Я следую примеру из https://www.robinwieruch.de/react-hooks-fetch-data/, где Робин устанавливает состояние аналогичным образом.По некоторым причинам, переменная состояния в моем случае никогда не устанавливается правильно.

Использование AWS Amplify для загрузки данных graphQL.Кажется, работает успешно для локальной переменной, но не переменной состояния. 

const [serviceTypes, setServiceTypes] = useState([{}]);
let myServiceTypes = [{}]; // try it with a local variable to debug

useEffect(() => {
  let unmounted = false;

  async function fetchData() {
    const result = await API.graphql(
      graphqlOperation(queries.listServiceTypes)
    );
    console.log(result);
    console.log('setting service types...');
    console.log(result.data.listServiceTypes.items);
    setServiceTypes(result.data.listServiceTypes.items);
    myServiceTypes = result.data.listServiceTypes.items;
    console.log(myServiceTypes); // set correctly
   console.log(serviceTypes); // empty
  }
  if (!unmounted) {
    fetchData();
  }
  return () => {
    unmounted = true;
  };
}, []);

Ожидается, что serviceTypes будет установлен на загруженные данные.Вместо этого он пуст.

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

Это потому, что вы не думаете об эффекте и правильно отображаете.

Mounting / Render 1

  • fetchData называется
  • setServiceTypes и передает тип сервиса следующему рендеру
  • serviceTypes пуст

рендер 2

  • useEffect не вызывается
  • serviceTypes теперь является тем, что было установлено для предыдущих serviceTypes

Попробуйте выйти из системы serviceTypes прямо перед рендерингом / возвратом

0 голосов
/ 03 июля 2019

setState не работает синхронно, как это.Вы не можете ожидать, что ваша переменная serviceTypes будет сразу же содержать данные сразу после их установки.Он будет обновлен после повторного рендеринга компонента.Попробуйте переместить console.log(serviceTypes); за пределы useEffect.

См. https://stackoverflow.com/a/36087156/5273790 для объяснения асинхронного setState.

...