Object.assign修改原数组对象：如何避免直接修改React状态？

你遇到的问题是典型的浅拷贝带来的问题——Object.assign([], this.state.getStatus) 或者扩展运算符 [...this.state.getStatus] 只是复制了数组的外层结构，但数组里的每一个post对象依然和原状态中的对象共享同一个内存引用。所以当你修改 mutator[index].post_comments 时，本质上是直接修改了原状态里的对象属性，这就违反了React状态不可直接修改的规范。

要解决这个问题，我们需要在修改目标post的post_comments时，先创建这个post对象的独立副本，而不是直接修改原引用的对象。具体代码如下：

socket.on('statusComment', (data) => {
  // 浅拷贝数组外层
  const mutator = [...this.state.getStatus];
  // 匹配data里的post_id和状态中post的_id，找到目标索引
  const index = mutator.findIndex(i => i._id === data.post_id);

  if (index !== -1) {
    // 创建目标post的副本，替换post_comments属性
    const updatedPost = {
      ...mutator[index], // 拷贝原post的所有属性
      post_comments: data.post_comments // 替换为新的评论数组
    };
    // 用新的post对象替换数组里的旧对象
    mutator[index] = updatedPost;

    console.log(mutator); // 仅副本被修改
    console.log(this.state.getStatus); // 原状态保持不变
    this.setState({
      getStatus: mutator
    });
  }
});

• [...this.state.getStatus] 先复制了数组的外层，保证数组本身是新的引用；
• {...mutator[index], post_comments: data.post_comments} 创建了目标post对象的新副本，把原post的所有属性拷贝过来，同时替换掉post_comments。这样修改的就是新对象的属性，不会影响原状态中的对象。

注意你原代码里的一个小细节：socket返回的data里用的是post_id来标识对应的帖子，但你的findIndex判断的是i._id === data._id——这会导致找不到正确的索引（因为data里没有_id字段），我在修复代码里改成了i._id === data.post_id，这才是正确的匹配逻辑。

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