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

作者站长头像
站长
· 阅读数 5

可能因为改变了系统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

回复
1个回答
avatar
test
2024-07-05

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

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

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

  // 使用新数组更新 state
  this.setState({
    machineListData: arr
  });
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容