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

注意

如果使用此优化，请确保数组包含所有值   从组件范围（例如道具和状态）转变过来   时间以及效果所用的时间。否则，您的代码将   参考先前渲染中的陈旧值。进一步了解如何   处理函数以及数组更改过于频繁时的操作。

如果您要运行效果并仅将其清理一次（在挂载和   卸载），则可以传递一个空数组（[]）作为第二个参数。这个   告诉React你的效果不依赖于道具的任何值   或状态，因此它不需要重新运行。这不是特殊处理   case —直接从依赖关系数组始终如何得出   有效。

如果您传递一个空数组（[]），则内部的道具和状态   效果将始终具有其初始值。在通过[]作为   第二个参数离熟悉的componentDidMount更近，并且   componentWillUnmount心理模型，通常有更好的解决方案   避免过于频繁地重新运行效果。另外，别忘了React   推迟运行useEffect直到浏览器绘制完毕，这样   多余的工作没什么问题。

我们建议将exhaustive-deps规则用作我们的一部分   eslint-plugin-react-hooks软件包。它警告何时依赖   指定不正确并提出修复建议。

Answer 2

您所做的一切都很好-您只需向您的useEffect实现中添加一个空的依赖项数组（如下所述）-

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

将数组传递给useEffect时，实际上是在告诉React仅在数组中的值之一发生更改时才运行效果。

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

您可以使用useEffect模拟其他生命周期事件，例如ComponentWillUnmount，ComponentDidUpdate等。我建议您详细了解{{3}中的useEffect钩子}。

React钩子获取不会停止获取

2 个答案:

注意