Next.js Toggle组件报错：Too many re-renders 无限循环求助

常见错误原因及修复 #

1. 直接在渲染阶段调用状态更新函数 #

这是最容易触发该报错的场景：把setToggle直接写在按钮的onClick属性里，导致组件每次渲染都会执行状态更新，陷入无限循环。

// 错误写法：每次渲染都会执行setToggle，触发重渲染循环
<button onClick={setToggle(!toggle)}>编辑</button>

修复方式：用箭头函数包裹状态更新逻辑，确保只有点击按钮时才执行：

// 正确写法
<button onClick={() => setToggle(!toggle)}>编辑</button>

2. 列表项共享同一个toggle状态 #

如果所有列表项共用一个全局的toggle状态，点击任意编辑按钮都会触发全量渲染，不仅可能引发性能问题，还会导致逻辑混乱。应该给每个条目分配独立的编辑状态：

// 初始化状态，用对象存储每个条目的编辑状态（key为条目ID）
const [editStates, setEditStates] = useState({});

// 切换指定条目的编辑状态
const toggleItemEdit = (itemId) => {
  setEditStates(prevState => ({
    ...prevState,
    [itemId]: !prevState[itemId]
  }));
};

// 列表渲染时，根据当前条目的ID判断是否显示编辑组件
{reservations.map(item => (
  <div key={item.id}>
    <p>{item.content}</p>
    <button onClick={() => toggleItemEdit(item.id)}>编辑</button>
    {/* 仅当当前条目处于编辑状态时，渲染UpdateReservation */}
    {editStates[item.id] && <UpdateReservation reservation={item} />}
  </div>
))}

3. 避免在渲染逻辑中直接修改状态 #

如果在组件的渲染流程里（比如条件判断、变量赋值）直接调用setToggle，会导致每次渲染都触发状态更新，形成循环。确保状态更新只在事件处理函数或useEffect这类副作用钩子中执行。

额外排查点 #

• 检查UpdateReservation组件内部是否存在触发父组件状态更新的逻辑，导致父组件反复渲染。
• 确认useState的初始化逻辑是否合理，避免每次渲染都生成新的初始值（比如不要在useState的初始化函数里编写重复执行的复杂计算）。

内容的提问来源于stack exchange，提问作者Paul S.