React API请求回调内连续调用setState仅单个生效，是什么原因？

问题原因 #

这个问题的核心是React的更新调度机制+组件中途卸载/更新上下文失效共同导致的，常见场景如下：

• 最可能的原因：你的组件父级元素绑定了和value1/value2关联的key属性。第一个setState执行后，对应状态变化触发父组件重渲染，父组件给当前子组件传入了新的key值，React会直接卸载旧的子组件实例、创建新的实例挂载。后续的第二个setState是调用已经被卸载的旧实例的状态更新函数，React默认会忽略已卸载组件的状态更新，因此不会生效。调换两个setState顺序后，哪个更新排在前面、先触发key变化，哪个就会生效，和你描述的现象完全吻合。
• 次要可能性：你使用的是React 17及更早版本，异步回调（Promise.then）内的状态更新默认不会批量处理，每个setState都会触发一次同步重渲染。如果第一次重渲染过程中触发了组件卸载、useEffect清理逻辑中断了后续更新，也会导致第二个setState失效。

为什么修改后的代码能运行 #

• 加入setTimeout的场景：相当于把第二个setState放到宏任务队列，会等待当前同步上下文的所有逻辑（包括第一次setState触发的重渲染、旧组件卸载、新组件挂载）全部执行完成后再调用，此时调用的是新挂载组件实例的更新函数，因此能正常生效。
• 加入useDispatch的场景：Redux的dispatch会触发全局状态更新，在React 18的自动批处理机制下，dispatch和后续两个setState会被合并为一次批量更新，父组件只会在三个更新全部完成后才触发重渲染，不会中途卸载子组件，因此两个状态更新都能正常生效。

推荐解决方案 #

• 首先排查父组件给当前子组件绑定的key，移除和value1/value2关联的动态key，如果必须用动态key，确保它不会在当前组件的生命周期内随意变化。
• 如果是React 17及更早版本，可以把两个状态合并为一个对象状态更新，避免多次触发重渲染：

const [values, setValues] = useState({value1: undefined, value2: undefined});
// 更新时合并修改
setValues({...values, value1: data.value1, value2: data.value2});

• 也可以使用React官方提供的unstable_batchedUpdates强制批量处理异步回调内的更新：

import { unstable_batchedUpdates } from 'react-dom';

// then回调内使用
unstable_batchedUpdates(() => {
  setValue1(data.value1);
  setValue2(data.value2);
});

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