Javascript 使用react钩子时的无限循环

在过去的几天里，我一直在学习react，在使用useEffect钩子时，我在设置状态变量时得到了infite循环

有谁能告诉我发生了什么，以及如何克服这个问题吗

这是我的密码

import React, { useState, useEffect } from "react";
import axios from "axios";

const TodoEntry = () => {

  const [todos, setTodos] = useState('');

  useEffect(() => {
    axios.get('http://localhost:5000/api/todos')
     .then(res => { setTodos(res.data); console.log(todos) })
     .catch(err => console.log(err))
  },[todos]);

  return (
    <div>
      <h1>Todo App</h1>
   </div>
  );
};

export default TodoEntry;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
const TodoEntry=（）=>{
const[todos，setTodos]=useState（“”）；
useffect（（）=>{
axios.get（）http://localhost:5000/api/todos')
.then（res=>{setTodos（res.data）；console.log（todos）}）
.catch（err=>console.log（err））
}[待办事项]；
返回(
待办事项应用程序
);
};
将默认值导出到入口；

这是因为

useffect

调用的依赖项列表是一个函数。您可能想添加todos数据本身

  useEffect(() => {
    getTodos();
  },[todos]);

---

代码中有几个问题：

• 由于

  gettoos

  函数是

  useffect

  hook的依赖项，因此每次状态更新时，都会创建新的

  gettoos

  函数，然后触发

  useffect

  hook

• 在使用

  async wait

  语法时，不需要链接

  then

  函数。您可以等待axios.get（…）的结果

要解决无限循环的第一个问题，请使用以下选项之一：

• 将

  getTodos

  函数包装在

  useCallback

  hook中。有关详细信息，请参阅
  由于，

  getTodos

  函数调用

  displayTodos

  ，因此需要将其包装在

  useCallback

  钩子中，并将

  displayTodos

  添加到包装

  gettoos

  函数的

  useCallback

  钩子的依赖项数组中。在我看来，最好删除

  displayTodos

  函数，并更新

  gettoos

  函数中的状态

  const getTodos = useCallback(async () => {
     try {
        const res = await axios.get('http://localhost:5000/api/todos')
        setTodos(res.data);
     } catch(err) {
        console.log(err);
     }
  }, [setTodos]);
  

  演示

• 将代码放入

  getTodos

  内部

  useffect

  钩子并移除

  getTodos

  函数

  useEffect(() => {
    axios.get("http://localhost:5000/api/todos")
     .then(res => setTodos(res.data))
     .catch(err => console.log(err));
  
  }, [setTodos]);
  

  演示

---

useffect（（）=>{gettoos（）；}，[todos]）试试这个。
useffect（（）=>gettoos（），[]）因为您只想在装载时执行一次。如果有一个linter抛出错误，那么可以在
useCallback
中包装
gettoos
以记忆它（而不是在每次渲染时创建新的函数引用），并将其添加回dependencies数组，或者将
getTodos
代码放在
useffect
钩子中。@MichaelYaworski在
useffect
钩子的依赖项中跳过添加依赖项不是一个好主意array@Yousaf这是一个好主意，如果你只想做这件事mount@MichaelYaworski谢谢你，我尝试了第二种方法并得到了正确的结果。请注意，从依赖项数组中省略
setTodos
是否安全，因为它是
useState
hook中的一个函数：“React保证
setState
函数标识稳定，在重新渲染时不会更改。这就是为什么从
useffect
或
useCallback
依赖项列表中省略是安全的。”@MichaelYaworski是的，它是安全的，但我仍然不介意将其作为依赖项添加，因为它让我养成了不丢失依赖项的习惯