MERN Todo应用（Vite React）无限重渲染错误求助

这个错误本质是组件陷入了「状态更新 → 重渲染 → 状态更新」的无限循环，下面是几种最常见的触发场景和解决办法：

• 直接在组件渲染阶段调用状态更新函数
  比如在组件顶层直接执行setTodos这类方法，每次组件渲染都会触发状态更新，进而引发新一轮渲染：

  // 错误示例
  const [todos, setTodos] = useState([]);
  setTodos(fetchTodos()); // 渲染时立即执行，触发循环
  

  解决：把数据获取或状态初始化逻辑放到useEffect钩子中，通过依赖数组控制执行时机：

  const [todos, setTodos] = useState([]);
  
  useEffect(() => {
    const getTodos = async () => {
      const res = await fetch("/api/todos");
      const data = await res.json();
      setTodos(data);
    };
    getTodos();
  }, []); // 空依赖数组确保只在组件挂载时执行一次
  

• 事件处理函数直接执行而非传递引用
  给按钮等元素绑定事件时，不小心直接执行了状态更新函数，导致渲染时就触发状态变化：

  // 错误示例
  <button onClick={setTodos([])}>清空所有待办</button>
  

  解决：用箭头函数包裹状态更新逻辑，或者定义单独的事件处理函数传递引用：

  // 方法1：箭头函数包裹
  <button onClick={() => setTodos([])}>清空所有待办</button>
  
  // 方法2：单独定义处理函数
  const handleClearTodos = () => setTodos([]);
  <button onClick={handleClearTodos}>清空所有待办</button>
  

• useEffect依赖数组存在不稳定值
  如果useEffect的依赖是每次渲染都会生成新引用的对象/数组，会导致钩子反复执行，触发状态更新和重渲染：

  // 错误示例
  useEffect(() => {
    // 处理todo逻辑
  }, [{ filter: "active" }]); // 每次渲染都是新对象，钩子重复执行
  

  解决：用useMemo缓存不稳定的依赖值，或者只依赖具体的基础类型属性：

  const memoizedFilter = useMemo(() => ({ filter: "active" }), []);
  useEffect(() => {
    // 处理todo逻辑
  }, [memoizedFilter]);
  

• 组件顶层的条件判断里直接更新状态
  在组件渲染的条件判断中调用状态更新，会在每次渲染时触发状态变化：

  // 错误示例
  if (todos.length === 0) {
    setTodos(initialTodos);
  }
  

  解决：把这类逻辑移到useEffect中，通过依赖数组控制执行时机：

  useEffect(() => {
    if (todos.length === 0) {
      setTodos(initialTodos);
    }
  }, [todos, initialTodos]);
  

如果以上场景都不符合你的代码情况，可以把App.js的完整代码贴出来，方便精准定位问题。

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