ReactJS对象更新、数组状态存储及partition键异常问题求助

问题1：为对象添加新键并存入数组，同时保存到组件状态 #

React状态遵循不可变原则，不能直接修改原状态对象或数组，必须创建新副本后再更新状态。具体步骤如下：

1. 从组件状态中取出目标数组和待处理对象
2. 创建对象的副本，通过扩展运算符（...）或Object.assign添加新键
3. 将新对象整合到数组副本中（新增或替换原有元素）
4. 使用setState更新组件状态（推荐用函数式setState，避免异步更新导致的状态不一致）

示例代码 #

给现有对象添加新键并更新数组

addNewKeyToItem = () => {
  this.setState(prevState => {
    const updatedDayDetails = prevState.dayDetails.map(item => {
      // 找到目标对象，创建副本并添加新键
      if (item.partition === prevState.activePartition) {
        return { ...item, end_time: "Thu Sep 01 2022 20:47:09 GMT+0500 (PKT)" };
      }
      return item;
    });
    return { dayDetails: updatedDayDetails };
  });
};

新增带新键的对象到数组

addNewObjectToArray = () => {
  this.setState(prevState => {
    const newDayItem = {
      day: "Tuesday",
      full_day: true,
      partition: 2,
      start_time: "Thu Sep 02 2022 09:00:00 GMT+0500 (PKT)",
      // 新增的键值对
      end_time: "Thu Sep 02 2022 17:00:00 GMT+0500 (PKT)"
    };
    // 复制原数组并添加新对象
    return { dayDetails: [...prevState.dayDetails, newDayItem] };
  });
};

问题2：map遍历修改对象时所有元素值相同的问题 #

问题原因 #

你代码中的partitionData是从dayDetails中获取的同一个对象引用，在map循环里：

• 每次修改partitionData.partition都是在修改这个原对象
• 每次return partitionData都是返回同一个引用

循环结束后，数组里的所有元素都指向同一个对象，因此最终所有元素的partition值都是最后一次修改的结果（3）。同时直接修改状态对象的引用还会污染原状态，违反React不可变原则。

解决方法 #

每次循环时创建独立的新对象副本，避免复用同一个引用。使用扩展运算符复制原对象的所有属性，再修改partition键：

修改后的setPartitionsDetails函数：

setPartitionsDetails = () => {
  // 先获取原对象（不直接修改它）
  const originalData = this.state.dayDetails.find(item => item.partition === this.state.activePartition);
  
  const dayDetails = this.state.partitions.map(partition => {
    // 每次循环创建新对象，复制原属性并修改partition
    return {
      ...originalData,
      partition: partition.id
    };
  });

  // 最后更新组件状态（如果需要）
  this.setState({ dayDetails });
};

这样每个循环都会返回独立的新对象，每个对象的partition对应当前遍历的partition.id，就能得到你期望的输出。

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