反应钩子获取不会停止获取

Question

我正在尝试重建我用作功能组件的某些类组件，该组件使用React Hook进行fetch。

我可以获取数据，这很好，但是它每隔几毫秒就会呼叫我的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(() => {
  fetchData();
}, []);

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

注意

如果使用此优化，请确保数组包括所有值 从变化的组件范围(例如道具和状态( 时间和效果使用的时间。否则，您的代码将 来自以前的渲染的参考陈旧值。了解有关如何 处理函数以及阵列经常变化时该怎么做。

如果您想运行效果并仅清理一次(在安装座上，并且 删除(，您可以将空数组([](作为第二个参数传递。这 告诉React，您的效果不取决于道具的任何值 或状态，因此不需要重新运行。这不是一个特别的处理 案例 - 它直接遵循依赖性数组的方式 作品。

如果您通过一个空数组([](，则在内部的道具和状态 效果将始终具有其初始值。在将[]作为 第二个参数更接近熟悉的componentDidMount，并且 componentWillUnmount心理模型，通常有更好的解决方案 避免经常重新运行效果。另外，别忘了反应 防御器运行useEffect，直到浏览器绘制后，请执行 额外的工作不再是问题。

我们建议将exhaustive-deps规则作为我们的一部分 eslint-plugin-react-hooks软件包。它警告当依赖关系是 指定错误并建议修复。

Answer 2

您正在做的事情很好 - 您只需要在useEffect实现中添加一个空的依赖项数组(下面说明(

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

当您将数组传递到使用效果时，实际上，您只在阵列中的一个值更改时才告诉REACT。

中的一个值。

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

。

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