javascript - react useEffect 正在运行并不停地获取数据

Question

我有一个使用 react Hook 的简单 react 组件。我正在使用 useEffect 和 useState。
问题是我意识到我的 API 获得了大量点击，调试后我看到 useEffect 正在不停地运行!

这是我非常简单的代码:

function DisplayUser({userId}) {
  const [loggedUser, setLoggedUser] = React.useState(null);
  React.useEffect(() => {
    fetchData(userId).then(user => {
      setLoggedUser(user);
    })
  });
  return (
    <div>
      <div>{loggedUser}</div>
    </div>
  );
}

Answer 1

这里发生的是 useEffect正在运行 after each render

Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update...

有办法做到Optimizing Performance by Skipping Effects ，您可以将数组作为第二个参数传递。

如果数组为空，则意味着此效果没有“依赖性”，它只会运行一次(与 componentDidMount 非常相似)。

如果数组有值，那么只有当这些值发生变化时效果才会重新运行(类似于我们对 componentDidUpdate 所做的)。

因此，在您的情况下，传递带有 userId 的数组是明智的值，因为您需要重新运行效果并仅在 userId 时获取用户数据已经改变。

function DisplayUser({userId}) {
  const [loggedUser, setLoggedUser] = React.useState(null);
  React.useEffect(() => {
    fetchData(userId).then(user => {
      setLoggedUser(user);
    })
  }, [userId]); // only run when userId changed
  return (
    <div>
      <div>{loggedUser}</div>
    </div>
  );
}