#独家

求助！react 改变（浅拷贝）数组对象的某一个值，列表没有自动更新？

可能因为改变了系统node的版本，我重新npm了一个老项目的node_modules

    addPortIconBtn(index)  {
        this.state.machineListData[(this.state.current - 1) * 10 + index].iscreateport = true
        this.setState({
            machineListData: this.state.machineListData
        })
    }

这时我发现项目中类似这种改变数组某个值的写法，视图都不再更新，我确定数据是变化的，于是我尝试浅拷贝的写法

addPortIconBtn(index)  {
        let arr = [...this.state.machineListData]
        arr[(this.state.current - 1) * 10 + index].iscreateport = true
        this.setState({
            machineListData: arr
        })
    }

这样依然不生效，于是我创建了最新版本的react脚手架，发现第一种写法也是可行，所以不知道到底哪里出了问题，视图是antd（4.15.2）的table，

<Table columns={this.state.columns} dataSource={this.state.machineListData} rowKey={(record) => record.dockerid}/>

react版本是16.13.1

你可以创建一个新数组，并把数组中的对象也进行浅拷贝，就行了

addPortIconBtn(index) {
  // 创建一个新数组，并将数组中的对象进行浅拷贝
  let arr = this.state.machineListData.map((item) => ({ ...item }));

  // 更新指定索引处的对象属性
  arr[(this.state.current - 1) * 10 + index].iscreateport = true;

  // 使用新数组更新 state
  this.setState({
    machineListData: arr
  });
}

不要直接修改原对象

addPortIconBtn(index) {
  // 用  JSON.parse(JSON.stringify(xxx)) 拷贝一个新的对象
  const arr = JSON.parse(JSON.stringify(this.state.machineListData))

  arr[(this.state.current - 1) * 10 + index].iscreateport = true;
  this.setState({
    machineListData: arr
  });
}

展开运算符只会拷贝第一层，也就是，你这里只拷贝了第一层对象，第二层对象的属性没有拷贝

let arr = [...this.state.machineListData]