React中useEffect钩子引发无限重渲染的解决方案咨询

核心问题回顾 #

你的代码中，useEffect依赖了todos状态，每次调用setTodos更新数组后，todos的引用发生变化，触发useEffect重新执行，再次请求数据并更新状态，形成无限循环。而如果直接移除依赖，组件挂载后不会再重新请求数据，新增待办后无法实时看到结果。

方案1：初始加载+本地状态直接更新（推荐，性能最优） #

将初始数据请求的useEffect改为空依赖，仅在组件挂载时执行一次；新增待办成功后，直接把新项添加到本地todos数组，无需重新请求整个列表。

import { useState, useEffect } from 'react';
import axios from 'axios';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const BASE_URL = '你的接口地址';

  // 仅组件挂载时请求初始待办数据
  useEffect(() => {
    const fetchTodos = async () => {
      const { data } = await axios.get(`${BASE_URL}/todos`);
      setTodos(data);
    };
    fetchTodos();
  }, []); // 空依赖，仅执行一次

  // 新增待办的处理函数
  const handleAddTodo = async (newTodoContent) => {
    // 调用后端新增接口，传入待办内容
    const { data: newTodo } = await axios.post(`${BASE_URL}/todos`, {
      content: newTodoContent,
      completed: false
    });
    // 直接更新本地状态，实时显示新增项
    setTodos(prevTodos => [...prevTodos, newTodo]);
  };

  return (
    <div>
      {/* 新增待办输入框和按钮 */}
      <input type="text" onKeyDown={(e) => {
        if (e.key === 'Enter') {
          handleAddTodo(e.target.value);
          e.target.value = '';
        }
      }} />
      {/* 渲染待办列表 */}
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.content}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

这种方式既避免了无限循环，又能在新增后立即看到结果，同时减少了不必要的接口请求，性能更优。

方案2：通过触发变量控制数据刷新（适合多端同步场景） #

如果你的业务需要实时同步后端最新数据（比如多人协作修改待办），可以新增一个专门的触发变量，用来控制useEffect重新请求数据，而非依赖todos本身。

import { useState, useEffect } from 'react';
import axios from 'axios';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [refreshCount, setRefreshCount] = useState(0); // 刷新触发变量
  const BASE_URL = '你的接口地址';

  // 初始加载+刷新时请求数据
  useEffect(() => {
    const fetchTodos = async () => {
      const { data } = await axios.get(`${BASE_URL}/todos`);
      setTodos(data);
    };
    fetchTodos();
  }, [refreshCount]); // 依赖刷新变量，仅当变量变化时执行

  const handleAddTodo = async (newTodoContent) => {
    await axios.post(`${BASE_URL}/todos`, {
      content: newTodoContent,
      completed: false
    });
    // 修改刷新变量的值，触发useEffect重新请求数据
    setRefreshCount(prev => prev + 1);
  };

  // 渲染逻辑同方案1...
};

这种方式会在新增成功后重新拉取整个待办列表，保证数据与后端完全一致，适合需要多端同步的场景。

总结 #

• 避免将状态本身作为useEffect的依赖来触发数据请求，这几乎一定会导致循环。
• 优先选择方案1，直接更新本地状态，既能实时显示又节省请求；如果需要强数据同步，再考虑方案2。

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