React通过props初始化state后修改state导致props同步变更如何解决

问题根源 #

你遇到的props跟随state同步修改的核心原因是引用类型浅拷贝导致的内存地址共享：

• 你初始化state时直接将props中的tableData（属于引用类型的对象）直接赋值给state，此时state的tableDataState和props的tableData指向内存中完全相同的对象
• 后续修改state中引用类型的属性时，本质就是修改了同一个内存地址的内容，props自然会同步变化
  另外你当前的state更新代码存在逻辑错误：你将原本是对象结构的tableDataState直接赋值为数组，和你预期的结构不匹配。

修复步骤 #

1. 初始化state时做深拷贝，切断和props的引用关联 #

对于层级不深、没有特殊类型（函数、Symbol等）的对象，可以直接用JSON序列化实现深拷贝：

// 组件初始化state时的正确写法
this.state = {
  tableDataState: JSON.parse(JSON.stringify(this.props.tableData))
}

如果数据包含特殊类型，可以自行实现递归深拷贝逻辑处理。

2. 修正state更新逻辑，仅修改目标字段 #

按照你预期的结构，只需要修改values字段即可，不需要重写整个tableDataState结构：

const { tableDataState } = this.state;
let formattedValue = '';
if (Array.isArray(tableDataState.values)) {
  // 直接用join拼接字符串，不需要遍历修改原数组
  formattedValue = tableDataState.values.map(option => option.listDisplay).join(' ');
}
this.setState({
  tableDataState: {
    // 拷贝外层对象，保留原有其他属性
    ...tableDataState,
    // 仅修改values字段
    values: formattedValue
  }
})

修改完成后state和props的引用完全独立，修改state不会再影响props的原始数据。

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