Question

所以，我正在使用hook useState（）：

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

然后使用useEffect（）挂钩从API获取数据：

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

    console.log(dailyData)

    fetchAPI();
});

但是问题是这些请求是无止境的。

我是React的新手，所以如果您解释为什么会这样，那将是很棒的事情。

Answer 1

任何状态数据更新时，都会触发useEffect。

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

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

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

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

Answer 2

您的useEffect需要数组依赖项例如。

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

 console.log(dailyData)

 fetchAPI();
}, []);

Answer 3

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

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

    console.log(dailyData)

    fetchAPI();
},[]);

如果要在发生某些更改时运行useEffect，则可以在数组中指定值，并且只要变量有任何更改，useEffect都会再次运行。

Answer 4

每次更改组件中变量的状态时，useEffect（）挂钩将运行。因此，为避免无限循环，您需要将依赖项数组嵌套在useEffect（）挂钩中。

您的代码可以修改为

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

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

        console.log(dailyData)

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

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

无限循环useEffect（）挂钩

4 个答案: