React CRUD更新遇Too many re-renders错误，求解决方案

以下是触发该错误的常见场景及对应解决方案：

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

如果组件顶层直接执行setXXX这类状态更新方法，会导致每次渲染都触发状态变更，进而引发无限循环。

错误示例：

const [user, setUser] = useState({});
setUser(initialUser); // 直接在组件顶层执行，每次渲染都会触发

修复方案：

// 方案1：直接将初始值传入useState
const [user, setUser] = useState(initialUser);

// 方案2：用useEffect控制初始化时机，仅在依赖变化时执行
useEffect(() => {
  setUser(initialUser);
}, [initialUser]); // 依赖数组确保只有initialUser变化时才触发

2. 修正事件绑定的写法 #

若在元素事件中直接执行函数（而非传递函数引用），会导致组件渲染时立即触发函数执行，引发状态更新循环。

错误示例：

<button onClick={handleSave()}>保存</button> // 渲染时直接执行handleSave

修复方案：

// 传递函数引用
<button onClick={handleSave}>保存</button>

// 需要传参时，用箭头函数包裹
<button onClick={() => handleSave(user.id)}>保存</button>

3. 检查useEffect的依赖数组 #

如果useEffect中包含状态更新，且依赖数组存在每次渲染都会生成新引用的值（如未缓存的对象、数组），会导致useEffect反复执行，触发无限循环。

错误示例：

useEffect(() => {
  setUser({ ...user, name: initialName });
}, [initialName, user]); // user是对象，每次渲染都会生成新引用，引发重复执行

修复方案：

// 方案1：使用函数式更新，仅依赖必要属性
useEffect(() => {
  setUser(prevUser => ({ ...prevUser, name: initialName }));
}, [initialName]); // 仅依赖initialName，通过prevUser获取最新状态

// 方案2：用useMemo缓存依赖值
const memoizedUser = useMemo(() => user, [user.id, user.name]);
useEffect(() => {
  setUser({ ...memoizedUser, name: initialName });
}, [initialName, memoizedUser]);

4. 父组件传递的props需避免频繁变更 #

如果父组件（如Display）传递给EditUser的props每次渲染都生成新值（比如直接传递未缓存的对象），会导致EditUser反复重渲染，进而触发内部状态更新循环。

修复方案：在父组件中用useMemo缓存要传递的props：

// 父组件Display中
const memoizedEditProps = useMemo(() => ({
  user: currentUser,
  onUpdate: handleUpdate
}), [currentUser, handleUpdate]);

<EditUser {...memoizedEditProps} />

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