无限循环 useEffect() 钩子答案

【问题标题】：Infinite loop useEffect() hook无限循环 useEffect() 钩子
【发布时间】：2020-04-23 09:42:49
【问题描述】：

所以，我正在使用钩子 useState()：

const [dailyData, setDailyData] = useState({});

还有 useEffect() 钩子从 API 中获取数据：

 useEffect(() => {
    const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
    }

    console.log(dailyData)

    fetchAPI();
});

但问题是这些请求是无穷无尽的。

我是 React 的新手，所以如果你能解释一下为什么会这样，那就太好了。

【问题讨论】：

标签： javascript reactjs web react-hooks

【解决方案1】：

您的useEffect 会在任何状态数据更新时触发。

因此，如果您在useEffect 中更新dailyData，状态更改将再次触发useEffect。

您可以将依赖数组添加到 useEffect 或任何标志变量以进行适当的操作。

例如，添加一个空的依赖数组将像componentDidMount 一样工作。

useEffect(() => {
    // Do something here
}, []);

【讨论】：

【解决方案2】：

你的 useEffect 需要一个数组依赖例如。

useEffect(() => {
 const fetchAPI = async () => {
    setDailyData(await fetchDailyData())
 }

 console.log(dailyData)

 fetchAPI();
}, []);

【讨论】：

【解决方案3】：

要使 useEffect 只运行一次，您必须在 useEffect 函数中提供一个空数组

useEffect(() => {
    const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
    }

    console.log(dailyData)

    fetchAPI();
},[]);

如果您想在发生某些变化时运行 useEffect，您可以指定数组中的值，并且每当变量发生任何变化时，useEffect 都会再次运行。

【讨论】：

【解决方案4】：

每次改变组件中变量的状态时，useEffect() 钩子都会运行。所以为了避免无限循环，你需要在 useEffect() 钩子中嵌套依赖数组。

你的代码可以修改为

 const [dailyData, setDailyData] = useState({});

     useEffect(() => {
     const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
      }

        console.log(dailyData)

     fetchAPI();
   },  [ //dependency array]);

可以定义依赖数组，因为它是 useEffect 函数中的第二个可选参数。顾名思义，它是一个依赖数组，当从先前的渲染更改时，将调用第一个参数中定义的效果函数。

【讨论】：