反应useEffect正在运行并且获取数据没有停止

时间:2018-11-10 13:32:35

标签: javascript reactjs react-hooks

我有一个使用react钩子的简单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>
  );
}

1 个答案:

答案 0 :(得分:5)

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

  

useEffect是否在每次渲染后运行?是!默认情况下,它在第一次渲染后和每次更新后都运行...

有一种方法Optimizing Performance by Skipping Effects,您可以将数组作为第二个参数传递。

如果数组为空,则表示此效果没有“依赖项”,它将仅运行一次(与lottery_number类似)。

如果数组具有值,则仅当这些值更改(与对useEffect所做的操作类似)时,效果才会重新运行。

因此,在您的情况下,明智的做法是传递一个带有componentDidMount值的数组,因为您将需要重新运行效果并仅在componentDidUpdate发生更改时获取用户数据。

userId