useReducer 中如何正确更新嵌套对象的状态？

欧阳姿言提问于 2026-03-27 10:01:20 阅读 21

框架

我在用 useReducer 管理表单状态，状态里有个嵌套对象，每次想改里面的某个字段，结果整个对象都被替换了，其他字段就丢了。试过用展开运算符，但好像没生效。

比如我的 state 是 { user: { name: '', email: '' } }，现在只想更新 name，该怎么写才不会清掉 email？

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_NAME':
      return { ...state, user: { name: action.payload } }; // 这样写 email 就没了
    default:
      return state;
  }
};

React 组件设计

我来解答赞 3 收藏

反馈

1 条解答

UX-茂庭 Lv1

const reducer = (state, action) => {

  switch (action.type) {

    case 'UPDATE_NAME':

      return { ...state, user: { ...state.user, name: action.payload } }; // 这样就不会丢email了

    default:

      return state;

  }

};

记住，更新嵌套对象时要层层展开。就这么简单。

2026-03-27 10:02