React hooks fetch 不会停止获取

Question

我正在尝试使用 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>        
);

}

Answer 1

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

useEffect(() => {

  fetchData();

}, []);

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

笔记

如果您使用此优化，请确保数组包含组件范围内的所有值（例如 props 和 state），这些值随时间变化并被效果使用。否则，您的代码将引用先前渲染中的陈旧值。了解有关如何处理函数以及数组更改过于频繁时该怎么做的更多信息。

如果您只想运行效果并仅将其清理一次（在装载和卸载时），您可以传递一个空数组 ( []) 作为第二个参数。这告诉 React 你的 effect 不依赖于来自 props 或 state 的任何值，所以它永远不需要重新运行。这不是作为特殊情况处理的——它直接遵循依赖项数组的工作方式。

如果传递一个空数组 ( [])，则效果中的 props 和 state 将始终具有其初始值。虽然传递[]的第二个参数是接近熟悉componentDidMount和 componentWillUnmount心智模式，通常有更好的解决方案，以避免重新运行效果过于频繁。另外，不要忘记 React 会推迟useEffect到浏览器绘制完成后运行，所以做额外的工作不是问题。

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