三点运算符的深拷贝为何在React失效？

Question

问题描述

问题就是在于这个btnArray 是 外面this.state.btnArray丢进来的。然后因为数据经过处理了后面每次传进来的时候都是上一次的的值。不是很明白为什么会让this.state.buttonList的值改变了。使用了...三元操作符发现一个样没办法解决。最后使用的是暴力的深拷贝才解决的。

let btnArrays = JSON.parse(JSON.stringify(btnArray))

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

componentDidMount() {
    this.init(this.props);
    this.getVehicle();
    this.state.buttonList = [
      { name: "基本参数", id: 1, type: "XOT_BMTMPTBP" },
      { name: "整车性能参数", id: 2, type: "XOT_BMTMPTVP" },
      { name: "系统性能参数", id: 3, type: "XOT_BMTMPTSP" },
      { name: "拆解结构", id: 4, type: "XOT_BMTMPTBOM" },
      { name: "图片", id: 5, type: "XOT_BMTMPTPIC" },
      { name: "文档", id: 6, type: "XOT_BMTMPTDOC" },
      { name: "视频", id: 7, type: "XOT_BMTMPTVDO" }
    ];
  }

 <ButtonGroups dataSource={this.buttonListFn(item.carShow,this.state.buttonList)}/>

buttonListFn(carShow, btnArray) {
    let btnArrays = JSON.parse(JSON.stringify(btnArray))
    return btnArrays.map(item => {
      carShow.forEach(e => {
        if (e.typeName == item.type) {
          item.isDisabled = !e.isShow;
        }
      });
      return item
    });
  }

你期待的结果是什么？实际看到的错误信息又是什么？

1 为何我的this.state.buttonList原始属性值会被污染。
2 为何...运算符和JSON的相关操作都是深拷贝，但是...没有解决相关问题呢？

Answer 1

要更新 state 的值,应该用this.setState().直接对 state 操作的话,数据很容易乱的.

扩展运算符...只是浅复制

const obj={a:1}
const arr=[obj]
const arr2=[...arr]
arr2[0].a=2
console.log(obj) // {a:2}