React hooks fetch 不会停止获取答案

【问题标题】：React hooks fetch won't stop fetchingReact hooks fetch 不会停止获取
【发布时间】：2019-11-17 11:00:46
【问题描述】：

我正在尝试使用 React 钩子来重建一些作为功能组件的类组件来进行获取。

我可以获取数据，这很好，但它每隔几毫秒调用一次我的 API，我只希望它获取数据并停止，就像它在具有 componentDidMount 的类组件中一样。

我想我可以明白它为什么会这样做（函数内部的 fetchData() 意味着它会继续调用自己）但我不知道如何解决它。

我尝试添加一个 setInterval，更改顺序，并将 fetchData() 移到函数外部（组件不会呈现，因为它当时未定义）。

const MyFunction = () => {

const [apiResponse,setApiResponse] = useState({})

  async function fetchData() {

    const res = await fetch(`http://localhost:9000/example`,{
      method: 'POST',
      mode: 'cors',
      body: JSON.stringify({date: '20190707'}),
      headers: {'content-type': 'application/json',
      credentials: 'include'
    }
    })
  res
  .json()
  .then(res => setApiResponse(res))
  }

useEffect(() => {

  fetchData();

});


var queryResult = apiResponse['units']


return (
  <React.Fragment>  
    <CardHeader color={"info"} stats icon>
    <CardIcon color={"info"}>
    <Icon>{"trending_up"}</Icon>
    </CardIcon>
    <p className={''}>Drop In</p>
      <h3 className={''}>
        {queryResult} <small>Units</small>
      </h3>
    </CardHeader>
    <CardFooter ></CardFooter>
  </React.Fragment>        
);

}

【问题讨论】：

您需要告诉 useEffect 它的依赖项是什么，参见例如stackoverflow.com/questions/53070970/infinite-loop-in-useeffect。这也包含在文档中：reactjs.org/docs/hooks-effect.html.

标签： reactjs react-hooks

【解决方案1】：

你正在做的很好 - 你只需要添加一个空的依赖数组到你的 useEffect 实现（下面的解释），就像这样 -

useEffect(() => {
  fetchData();
}, []);

当你将一个数组传递给 useEffect 时，你实际上是在告诉 React 只有在数组中的一个值发生变化时才运行你的效果。

我们使用空数组作为依赖数组，因为它会导致效果模拟类组件中众所周知和喜爱的 ComponentDidMount 生命周期事件，仅在组件安装时运行，而不是在每次渲染后运行。

您可以使用useEffect 来模拟其他生命周期事件，例如ComponentWillUnmount、ComponentDidUpdate 等。我建议您在docs 中阅读更多关于useEffect 挂钩的信息。

【讨论】：

【解决方案2】：

尝试在 useEffect 末尾添加一个空数组：

useEffect(() => {

  fetchData();

}, []);

React 文档：https://reactjs.org/docs/hooks-effect.html

注意

如果您使用此优化，请确保数组包含所有值从改变的组件范围（例如道具和状态）时间和效果所使用的时间。 否则，您的代码将从以前的渲染中引用过时的值。了解更多关于如何处理函数以及当数组变化太频繁时该怎么办。

如果你想运行一个效果并且只清理一次（在挂载和 unmount)，您可以传递一个空数组 ([]) 作为第二个参数。这告诉 React 你的效果不依赖于 props 的任何值或状态，因此它永远不需要重新运行。这不作为特殊处理 case — 它直接遵循依赖项数组的方式有效。

如果你传递一个空数组（[]），里面的 props 和 state 效果将始终具有其初始值。在传递[] 作为第二个参数更接近熟悉的componentDidMount 和 componentWillUnmount心智模型，通常有更好的解决方案以避免过于频繁地重新运行效果。另外，不要忘记 React 推迟运行 useEffect 直到浏览器绘制完成后，这样做额外的工作不是问题。

我们建议使用exhaustive-deps 规则作为我们的一部分 eslint-plugin-react-hooks 包。它会在依赖项出现时发出警告指定错误并建议修复。

【讨论】：