useReducer返回的dishState不随initDishState变更，是否为异步修改变量导致？

问题根本原因 #

这不是异步流程修改变量导致的，是React内置Hook useReducer 的固有特性：传给useReducer的第二个参数仅会在组件首次挂载时作为初始值生效，后续父组件传入的initDishState更新不会同步到useReducer返回的state里，useState也存在同样的逻辑。

可行解决方案 #

你可以根据业务场景选以下任意一种方案解决：

• 方案1：给DishModal绑定动态key，强制state重置
  在父组件渲染DishModal时，将和initDishState强关联的变量作为key值，当initDishState变化时key会同步变化，React会销毁旧组件实例重新渲染新实例，新实例的useReducer会用最新的initDishState初始化。
  代码示例：

  <DishModal
    key={`${dishKey}-${dishState.length}`} // 可根据你的数据结构调整为能唯一标识dishState的取值
    type={"replace"}
    itemCode={dishInfo.poscd}
    modalRef={modalRef}
    initDishState={dishState}
    addedOrderState={dishInit}
  />
  

  该方案改造成本最低，适合DishModal内部没有需要保留的临时状态的场景。

• 方案2：新增监听逻辑主动更新state
  在DishModal内部新增useEffect监听initDishState的变化，变化时触发dispatch更新本地state，需要先在你的dishReducer中新增重置state的逻辑：

  // 先在dishReducer里新增case
  function dishReducer(state, action) {
    switch(action.type) {
      case 'RESET_DISH_STATE':
        return action.payload
      // 其他原有逻辑
    }
  }
  

  然后在DishModal组件里加监听：

  export default function DishModal({
    type,
    itemCode,
    modalRef,
    initDishState,
    addedOrderState,
  }: DishModalType): JSX.Element {
    const { menuInfo } = useContext(MenuContext);
    const menuDetailData = menuInfo.menu_detail;
    const itemInfo = menuDetailData[itemCode];
    const [dishState, DishDispatch] = useReducer(dishReducer, initDishState);
    // 新增以下监听逻辑
    useEffect(() => {
      DishDispatch({
        type: 'RESET_DISH_STATE',
        payload: initDishState
      })
    }, [initDishState])
    // 原有逻辑
  }
  

  该方案不会销毁重建组件，适合DishModal内部有需要保留的临时状态的场景。

验证判断依据 #

你打印的两个日志如果符合initDishState已经更新为新值、但dishState还是旧值的特征，就完全符合上述特性的表现；如果是异步修改变量导致的问题，你打印出的initDishState也会是旧值。

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