React项目中Redux添加新对象到数组时原有元素被更新如何解决

问题原因 #

你的代码存在两个核心问题导致该现象：

• 错误读取初始状态数组：代码中每次追加元素时读取的是initialState.myCities，该值永远为空数组，而非当前state中已经存储了历史数据的state.myCities，会导致历史添加的城市数据每次都会被清空。
• 引用类型共享内存地址：接口返回的payload是对象类型，属于引用值，你直接将同一个payload同时赋值给aCity和存入myCities数组，两者指向同一块内存地址。后续只要payload或者aCity的属性被修改，数组中对应的对象也会同步更新。

修复方案 #

1. 追加元素时读取当前状态下的myCities数组，而非初始空数组
2. 往数组中存入payload前先做浅拷贝（如果payload存在深层嵌套属性则做深拷贝），切断引用关联
   修复后的代码如下：

import ActionTypes from "../constants/ActionTypes";

const initialState = {
  myCities: [],
  aCity: {},
};

export const WeatherReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case ActionTypes.GETBY_CITYNAME:
      // 读取当前状态已有的城市列表
      const existCities = state.myCities;
      // 对payload做浅拷贝，切断和aCity的引用关联
      // 如有深层嵌套可替换为深拷贝逻辑：const newCity = JSON.parse(JSON.stringify(payload))
      const newCity = {...payload};
      return {
        ...state,
        aCity: payload,
        myCities: [...existCities, newCity],
      };
    default:
      return state;
  }
};

对应的运行状态截图参考：

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