Question

我想更好地理解为什么在我直接在下面调用的函数中更新状态会导致该函数在无限循环中运行。

我知道，如果要在挂载后立即更新状态，则应该使用“ useEffect”，但是我想知道为什么此无限循环正在发生的原因。

我尝试删除更新状态的函数调用，并且可以看到它不再在无限循环中运行。

import React, { useState } from "react";

const App = () => {
  const [tasks, setTasks] = useState();
  const getSheetData = text => {
    setTasks(text);
    console.log(text);
  };
  getSheetData("time");

如果删除了“ setTasks（text）”，则不再存在无限循环。

Answer 1

状态更新后，组件将重新渲染。因此，在您的情况下，您要更新状态，然后重新渲染组件，然后再次进行更新-导致无限循环。

React.useEffect(() => {
  getSheetData("time")
}, [])

[]作为第二个参数表示依赖项数组为空-导致它仅发生一次（类似于componentDidMount（））

使用Hook更新状态会导致函数内的无限循环

1 个答案: