React-Redux添加新数组项后旧元素状态被意外修改问题

看起来你遇到了Redux状态更新时的引用类型陷阱，我帮你一步步拆解问题：

首先，先修正你代码里的一个明显错误 #

你尝试的第二种Redux写法有致命问题：

case "ADDNEWDATA": {
  let arr = [...state.mydata];
  action.payload.newdata.map((item) => {
    arr = arr.push(item)
  })
  return Object.assign({}, state, { mydata: arr })
}

Array.push()返回的是数组的新长度，不是修改后的数组！循环结束后arr会变成一个数字，直接导致状态异常，这个写法直接弃用就好。

为什么前两种正确的浅拷贝写法还是出问题？ #

你第一种和第三种写法都是符合Redux不可变原则的（浅拷贝数组再添加新项），那问题大概率不在Redux的更新逻辑里，而是在新数据的创建过程或者组件渲染逻辑上：

原因一：创建新数据时意外修改了旧状态的引用

如果你生成新数据时直接复用了旧状态里的对象引用，比如：

// 错误示范：直接修改旧对象再添加
const oldItem = state.mydata[0];
oldItem.clickNumber = 2; // 这里直接修改了state里的旧项
const newData = oldItem;
dispatch({type: "ADDNEWDATA", payload: {newdata: newData}})

因为JavaScript对象是引用类型，修改这个对象会同时影响它在数组里的旧实例——它们指向同一个内存地址。

解决办法：创建新数据时生成全新的对象：

// 正确示范：浅拷贝旧对象属性，生成新对象
const newData = {
  ...state.mydata[0], // 复制旧对象的所有属性
  clickNumber: 2 // 单独设置新编号
};
dispatch({type: "ADDNEWDATA", payload: {newdata: newData}})

原因二：组件渲染时没有绑定每个项的独立编号

如果你的渲染逻辑没有用每个item自身存储的clickNumber，而是用了一个全局变量来计数，比如：

// 错误示范：用全局变量渲染，导致重新渲染时所有项编号重置
let currentCount = 0;
const itemList = state.mydata.map(item => {
  currentCount++;
  return <div>点击编号：{currentCount}</div>
})

这种情况下，每次添加新项触发重新渲染时，currentCount会从头累加，所有旧项的编号都会被重新计算成最新的序列。

解决办法：直接读取每个item自身的clickNumber属性：

// 正确示范：渲染item自身的编号
const itemList = state.mydata.map(item => {
  return <div>点击编号：{item.clickNumber}</div>
})

验证方法 #

你可以打开Redux DevTools，查看每次ADDNEWDATA动作前后的state变化：

• 如果DevTools里旧项的clickNumber确实被修改了，那问题出在新数据的引用复用
• 如果DevTools里旧项的clickNumber没变化，但页面显示变了，那问题出在组件渲染逻辑

最后给你一个更简洁的Redux更新写法，和你第三种写法本质一致，但可读性更好：

case "ADDNEWDATA": {
  return {
    ...state,
    mydata: [...state.mydata, action.payload.newdata]
  };
}

内容的提问来源于stack exchange，提问作者Metin Genç