如何用扩展语法复制JSON及React Redux状态的特定键值

我来一步步帮你解决这两个问题，结合你给出的具体场景来讲解：

1. 从API返回的JSON对象中仅复制特定键对应的值 #

扩展语法（...）本身是用来展开对象的所有可枚举属性，但如果我们只想提取特定键的值，可以结合对象解构或者直接构造新对象来实现，举个针对你给出的API响应的例子：

假设API返回的数据是这样的：

const apiResponse = { 
  "@odata.context": "/redfish/v1/$metadata#ComputerSystem.ComputerSystem", 
  "@odata.id": "/redfish/v1/Systems/1/", 
  "Bios":{ 
    "@odata.id": "/redfish/v1/systems/1/bios/",
    "Manufacturer": "ABC" 
  }
};

方式1：解构+直接构造新对象 #

这是最直观的方式，先解构出我们需要的Manufacturer，再把它放到新对象里：

// 从嵌套的Bios对象里解构出Manufacturer
const { Bios: { Manufacturer } } = apiResponse;
// 构造只包含Manufacturer的新对象
const targetObj = { Manufacturer };

方式2：结合扩展语法（适合多键或需条件判断的场景） #

如果需要判断Bios是否存在（避免报错），或者要同时提取多个键，可以用扩展语法配合条件判断：

const targetObj = {
  // 只有当Bios存在时，才展开包含Manufacturer的对象
  ...(apiResponse.Bios && { Manufacturer: apiResponse.Bios.Manufacturer })
};

这样targetObj里只会有Manufacturer这一个键（如果Bios存在的话）。

2. React Redux Reducer中用扩展语法更新特定键的状态 #

Redux的Reducer有个硬性要求：不能直接修改原状态，必须返回全新的状态对象。针对你给出的初始状态和API响应，我们需要逐层用扩展语法复制不变的部分，只更新Information里的Manufacturer值。

首先看初始状态：

const initialState = { Information: { Manufacturer: undefined, Model: undefined } };

完整的Reducer实现 #

const systemReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_MANUFACTURER': {
      // 从action的payload里拿到API返回的数据
      const { Bios } = action.payload;
      return {
        // 复制原状态的所有顶层属性，保证其他状态不受影响
        ...state,
        // 更新Information对象：复制原Information的所有属性（比如Model），只替换Manufacturer
        Information: {
          ...state.Information,
          // 用可选链操作符处理Bios可能不存在的情况，避免报错
          Manufacturer: Bios?.Manufacturer
        }
      };
    }
    // 其他action类型的处理...
    default:
      return state;
  }
};

简化版（提前提取Manufacturer） #

如果在触发action的时候就已经从API响应里提取好了Manufacturer，Reducer可以更简洁：

// 触发action时的代码
const apiResponse = /* API返回的对象 */;
dispatch({
  type: 'UPDATE_MANUFACTURER',
  payload: { manufacturer: apiResponse.Bios?.Manufacturer }
});

// Reducer里的处理
case 'UPDATE_MANUFACTURER': {
  return {
    ...state,
    Information: {
      ...state.Information,
      Manufacturer: action.payload.manufacturer
    }
  };
}

这里的核心逻辑是：逐层展开复制不变的部分，只修改需要更新的键，这样既遵守了Redux的不可变原则，又精准更新了我们需要的状态。

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