Многократные выборки данных с помощью React Hooks - PullRequest
Новая
       33

Многократные выборки данных с помощью React Hooks

1 голос
/ 04 апреля 2019

Я хотел бы получить глобальную информацию от пользователя Github и его репозиториев (и получать прикрепленные репозитории будет здорово).Я пытаюсь сделать это с асинхронным ожиданием, но это правильно?У меня есть 4 раза reRender (4 раза журнал консоли).Можно ли перезапустить все компоненты, когда все данные извлечены? 

function App() {
  const [data, setData] = useState(null);
  const [repos, setRepos] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const respGlobal = await axios(`https://api.github.com/users/${username}`);
      const respRepos = await axios(`https://api.github.com/users/${username}/repos`);

      setData(respGlobal.data);
      setRepos(respRepos.data);
    };

    fetchData()

  }, []);

  if (data) {
    console.log(data, repos);
  }

  return (<h1>Hello</h1>)
}

1 Ответ

0 голосов
/ 04 апреля 2019

Несколько обновлений состояния пакетируются, но только если они происходят синхронно из обработчиков событий, а не setTimeouts или async-await wrapped methods.

Это поведение аналогично классам, и в вашем случае выполняется два цикла обновления состояния из-за двух вызовов обновления состояния

Итак, изначально у вас есть начальный рендер, а затем у вас есть два обновления состояния, поэтому компонент рендерит три раза.

Так как два состояния в вашем случае связаны, вы можете создать объект и обновить их вместе liek 

function App() {
  const [resp, setGitData] = useState({ data: null, repos: null });

  useEffect(() => {
    const fetchData = async () => {
      const respGlobal = await axios(
        `https://api.github.com/users/${username}`
      );
      const respRepos = await axios(
        `https://api.github.com/users/${username}/repos`
      );

      setGitData({ data: respGlobal.data, repos: respGlobal.data });
    };

    fetchData();
  }, []);

  console.log('render');
  if (resp.data) {
    console.log("d", resp.data, resp.repos);
  }

  return <h1>Hello</h1>;
}

Рабочая демоверсия

...