useEffect添加todos依赖触发无限循环，移除依赖功能异常求助

问题根源 #

你这段代码的核心问题是把todos放进了useEffect的依赖数组，但在effect内部又调用setTodos更新了todos状态——每次todos状态变化，useEffect就会重新执行，执行时又会发起请求、更新状态，直接形成无限循环。

方案1：仅在组件挂载时请求一次数据 #

如果你的需求是组件加载时获取初始todos数据，直接把依赖数组改成空数组[]，这样effect只会在组件挂载时执行一次，彻底解决循环问题：

useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://localhost:8888/todos');
        const todosWithBooleanDone = response.data.map(todo => ({
          id: todo.id,
          name: todo.name,
          done: todo.done === 1,
        }));
        setTodos(todosWithBooleanDone);
      } catch (error) {
        console.error('Error fetching todos:', error);
      }
    };

    fetchData();
  }, []); // 空数组表示仅在组件挂载时执行

方案2：根据特定业务条件重新请求 #

如果后续需要根据其他条件（比如筛选状态、用户ID）重新获取数据，就把那个条件放进依赖数组，而非todos本身。比如有个控制筛选的filterStatus状态：

const [filterStatus, setFilterStatus] = useState('all');

useEffect(() => {
    const fetchData = async () => {
      try {
        // 根据筛选状态拼接请求参数
        const response = await axios.get(`http://localhost:8888/todos?status=${filterStatus}`);
        const todosWithBooleanDone = response.data.map(todo => ({
          id: todo.id,
          name: todo.name,
          done: todo.done === 1,
        }));
        setTodos(todosWithBooleanDone);
      } catch (error) {
        console.error('Error fetching todos:', error);
      }
    };

    fetchData();
  }, [filterStatus]); // 仅当筛选状态变化时重新请求

关于「移除todos依赖后功能异常」的说明 #

如果移除todos依赖后功能不正常，大概率是你混淆了依赖的作用——这个effect的核心是获取初始数据，完全不需要依赖todos本身。如果有后续操作（比如修改todo状态）需要更新数据，应该把这些逻辑放在单独的事件处理函数或其他effect中，不要和初始数据请求的逻辑混在一起。

内容的提问来源于stack exchange，提问作者Giorgio