React使用useReducer修改嵌套状态时遇到的问题求助

我来帮你梳理下问题所在，以及怎么修复这些useReducer的case语句：

核心问题分析 #

你遇到的TypeError: Cannot read property 'object' of undefined主要有两个原因：

• 数组项丢失：最初的SET_CUST1_ADDRESS case里，你返回的customer数组只包含了修改后的第二个客户，把第一个客户（Bob）直接丢弃了。这会导致后续状态里customer[0]不存在，当其他case尝试访问它时就会报错。
• 深层嵌套拷贝不完整：修改电话的case里，同样要确保整个customer数组的所有项都被保留，同时正确逐层拷贝嵌套对象，避免修改原状态的引用。

修正后的case语句 #

下面是修复后的完整case逻辑，每个修改都确保保留未变更的状态部分：

const reducer = (state, action) => {
  switch (action.type) {
    // 修改第一个客户的地址
    case "SET_CUST_ADDRESS":
      return {
        ...state,
        customer: [
          { ...state.customer[0], address: action.value },
          // 保留第二个客户的原状态
          state.customer[1]
        ]
      };

    // 修改第二个客户的地址
    case "SET_CUST1_ADDRESS":
      return {
        ...state,
        customer: [
          // 保留第一个客户的原状态
          state.customer[0],
          { ...state.customer[1], address: action.value }
        ]
      };

    // 修改第二个客户的家庭晚间电话
    case "SET_CUST1_PHONE_HOME_EVENING":
      return {
        ...state,
        customer: [
          // 保留第一个客户
          state.customer[0],
          {
            ...state.customer[1],
            phone: [
              {
                ...state.customer[1].phone[0],
                home: {
                  // 拷贝home对象的其他属性，只更新evening
                  ...state.customer[1].phone[0].home,
                  evening: action.value
                }
              }
            ]
          }
        ]
      };

    default:
      return state;
  }
};

关键要点说明 #

• 始终保留未修改的数组项：每次更新customer数组时，一定要把没修改的元素（比如state.customer[0]或state.customer[1]）原样放回数组，不能只保留修改后的那一个。
• 逐层浅拷贝嵌套对象：对于深层嵌套的对象（比如phone、home），要一层一层用扩展运算符...拷贝，确保只修改目标属性，不影响其他部分的状态引用。
• 避免状态截断：之前的错误写法会导致customer数组长度变成1，后续任何访问customer[1]的操作都会得到undefined，进而触发TypeError。

这样修改后，两个地址修改的case共存时就不会互相干扰，所有状态更新都会正确保留原数据结构，同时修改指定的属性。

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