React useState无法更新对象及addToOrder方法调用报错问题

问题说明 #

• 在React DevTools中通过$r手动调用App组件的addToOrder(key)方法时，触发错误：VM761:1 Uncaught TypeError: $r.addToOrder is not a function
• 点击页面上的“Add to order”按钮后，order状态对象未发生预期更新

背景：作为React新手，跟随Wes Bos的React课程将类组件重构为函数组件，开发海鲜餐厅应用，已确认index属性传递无误。

问题原因 #

使用useState更新对象类型的状态时，未正确合并原有状态，直接覆盖的操作导致状态更新异常，同时引发组件方法挂载相关的问题。

修复代码 #

const addOrder = (key) => {
  // 拷贝原有order对象，避免直接修改不可变状态
  const order = { ...state.order };
  // 更新对应菜品的订购数量，不存在则初始化为1
  order[key] = order[key] + 1 || 1;
  // 合并整个state对象，仅更新order字段
  setState({
    ...state,
    order: order,
  });
};

优化方案：使用useReducer #

针对包含嵌套对象、多类型操作的复杂状态管理场景，useReducer比useState更具优势，能让状态更新逻辑更清晰、更易维护：

// 定义reducer处理状态更新逻辑
const appReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TO_ORDER':
      const updatedOrder = { ...state.order };
      updatedOrder[action.payload] = updatedOrder[action.payload] + 1 || 1;
      return { ...state, order: updatedOrder };
    default:
      return state;
  }
};

// 在组件中初始化useReducer
const [state, dispatch] = useReducer(appReducer, initialState);

// 重构addToOrder方法
const addOrder = (key) => {
  dispatch({ type: 'ADD_TO_ORDER', payload: key });
};

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