React自定义useForm Hook连续状态更新读取旧值问题求解

• 初始版本的setError存在闭包陷阱：useForm每次渲染时生成的setError函数，都会固定捕获本次渲染周期的errors状态值。当你在同一个事件循环内连续调用两次setError时，两次调用读取的都是同一个旧errors值，第二次更新不会基于第一次更新后的结果计算，最终只有最后一次更新生效。
• React默认会对同一个事件循环内的多次状态更新做批量合并，第一次调用setErrors后不会立刻触发组件重渲染，因此第二次调用setError时拿到的还是更新前的旧值。加setTimeout后功能正常的原因是延迟让第二次更新被放到下一个事件循环执行，此时第一次更新已经触发重渲染，setError拿到的就是最新状态。
• 你尝试的队列方案属于冗余实现，而且你定义的valueQueue、errorQueue等是全局变量，如果项目内同时有多个组件使用useForm，队列会被多个实例共享，反而会引发更复杂的状态错乱问题。

你最终采用的函数式状态更新是React官方推荐的标准解决方案，完全可以解决该问题：

const setError = (newState) => {
    setErrors((errors) => {
      let tempState = { ...errors };
      newState.forEach((_state) => {
        if (_state.isExist) {
          if (_state.i18n) tempState[_state.i18n] = _state.data;
        } else {
          if (tempState.hasOwnProperty(_state.i18n))
            delete tempState[_state.i18n];
        }
      });
      return tempState;
    });
};

• 给状态更新函数传入回调时，React会自动将当前最新的状态值作为参数传入回调，无论多少次连续调用，每次更新都会基于上一次更新后的结果计算，天然规避了闭包捕获旧状态的问题。
• 同理可以把setValue、setWarning都改成同样的函数式更新写法，就能完全解决同类状态覆盖问题，不需要额外维护队列。

• 将errors的初始值从空数组改为空对象，和后续存储的键值对结构保持一致，避免类型不一致引发的潜在问题。
• 移除所有全局队列变量，降低代码复杂度。

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