使用 React Hooks 多次获取数据 axios

Question

我想从 Github 用户和他的存储库中获取全局信息（并且固定存储库会很棒）。我尝试使用 async await 来实现，但这是正确的吗？我有 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>)
}

Answer 1

多个状态更新是批处理的，但前提是它在事件处理程序中同步发生，而不是setTimeouts或async-await wrapped methods。

此行为类似于类，因为在您的情况下，由于发生两次状态更新调用，它会执行两个状态更新周期

所以最初你有一个初始渲染，然后你有两个状态更新，这就是组件渲染三次的原因。

由于您的案例中的两个状态是相关的，您可以创建一个对象并将它们一起更新，如下所示：

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

工作演示