Question

简单的待办事项应用，列出我的任务并允许我提交新任务。连接到我构建的 REST API，因此使用对该 API 的调用来检索任务。我使用 useEffect 来获取所有任务并将它们存储在一个任务数组中。这应该在每次数组更改时运行（当我添加一个新任务时，当我删除一个任务时等），所以我不必刷新即可查看更改。

使用效果代码：

   const [tasks, setTasks] = useState([])
   useEffect(() => { 
        axios.get("http://localhost:8000/api/task-list")
        .then(response => {
            setTasks(response.data)
        })
        .catch(error => {
            console.log(error)
        })
        
    }, [tasks])

现在的问题是对我的 API 的调用几乎是无限的。它无限期地运行，而不仅仅是在任务数组更改时。我认为这与检查 tasks === tasks 和它们看起来不完全一样。但我不确定。

我真的很感激任何帮助，因为我不能在进行无限 API 调用的同时继续这样。它现在才有效，因为 API 是我的。

Answer 1

如果您在依赖数组中有 tasks，则每当 tasks 更改时都会调用效果。

由于您正在更新 effect 内的任务，它会再次触发相同的 effect。并且一直持续下去。

如果您只想运行一次，则需要将空数组作为依赖项，如果它依赖于某个状态，请添加它。

将 [tasks] 作为依赖项的目的是什么？

由于您只能使用 tasks 修改 setTasks，因此将其作为依赖项是没有意义的。通常你会有一些其他的状态变化（比如按下一个按钮）来更新任务。

查看 docs 的 useEffect 行为

Answer 2

这是一个循环：每次 tasks 更改时，您的效果都会运行。效果本身会修改 tasks 数组，因此它会再次运行，等等。

你应该只运行一次，当组件挂载时，你可以用一个空的依赖项数组来实现：

useEffect(() => { 
        axios.get("http://localhost:8000/api/task-list")
        .then(response => {
            setTasks(response.data)
        })
        ...
        
    }, [])

然后，您必须为将元素删除/添加到列表中的事件创建函数回调。例如：

const addTask = () => {
  const newTask = ... // the value of your new task, eg. got from an input, ...
  setTasks(prevTasks => prevTasks.push(newTask));
};
...
<Button onClick={addTask}> Add it! </Button>

在 useEffect 依赖数组中添加数组导致无限循环

2 个答案: