内部setState依赖父级prevState时如何拆分嵌套的setState调用

问题根本原因 #

你触发警告的核心原因是：setSketchState 传入的函数式更新回调属于纯计算函数，React要求它不能包含任何副作用（比如调用其他setState、修改外部变量、发起请求等），并发模式下React甚至可能多次调用这个回调，里面的嵌套setState会被重复执行，引发非预期的行为。

推荐解决方法（符合React设计规范） #

把两个状态的联动逻辑移到useEffect中实现，完全移除状态更新回调里的副作用，逻辑和你原来的判断规则完全对齐：

1. 先修改原来的状态更新逻辑，只保留sketchState的纯计算：

const setStateImageAndIndex = (state, image) => {
  setSketchState(prevState => ({
    ...prevState,
    ...state,
    image: image
  }));
};

2. 新增useEffect监听sketchState的index变化，触发currentSketchIndex的更新：

import { useEffect } from 'react';

// 组件内其他逻辑...
useEffect(() => {
  if (sketchState.index !== undefined && sketchState.index !== currentSketchIndex) {
    setCurrentSketchIndex(sketchState.index);
  }
}, [sketchState.index, currentSketchIndex]);

可选优化方案 #

如果你的业务场景中currentSketchIndex永远和sketchState.index保持联动，没有独立的更新逻辑，可以直接删除currentSketchIndex这个独立状态，所有用到currentSketchIndex的地方直接替换为sketchState.index，从根源上避免多状态同步的问题。

不推荐的临时兼容方案：如果你暂时不想调整逻辑结构，可以把判断逻辑移到setSketchState外部，但是这种写法在批量更新场景下可能拿到旧状态导致判断错误：

const setStateImageAndIndex = (state, image) => {
  if (state.index !== undefined && sketchState.index !== state.index) {
    setCurrentSketchIndex(state.index);
  }
  setSketchState(prevState => ({
    ...prevState,
    ...state,
    image: image
  }));
};

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