React的Table组件在更新dataSource时，未重新渲染页面

最新推荐文章于 2024-03-05 16:23:44 发布

JohnZhaowen

最新推荐文章于 2024-03-05 16:23:44 发布

阅读量2w

点赞数 26

本文链接：https://blog.csdn.net/qq_28060549/article/details/88051741

版权

本文探讨了在React中如何正确更新状态以触发Table组件的重新渲染。通过对比直接修改引用与创建新引用的方式，解释了为什么前者无法使Table组件响应状态变化，而后者可以。同时，提到了Table组件在每次重新渲染时，其columns属性也会被重新渲染。

摘要由CSDN通过智能技术生成

1. 由于dataSource是list对象，如果采用如下方法，则只是操作引用：

  handleDataSource = () => {
    let temp = this.state.dataSource;    
  
    temp.push({
      id: 'a',
      key: 'a',
      jobName: 'a',
      jobGroup: 'a',
      jobStatus: '2', 
      owner:'zs',
      desc: 'desc',
    });

    this.setState({
      dataSource : temp,
    });
   
  }

temp.push其实就是相当于this.state.dataSource.push，引用没有改变，只是改变了引用指向的内存数据，React认为虚拟DOM并没有改变，因此，不会重新渲染页面。这就会导致Table组件的dataSource改变了，但是Table并没有重新渲染。

2.更新代码如下：

  handleDataSource = () => {
    let temp = [...this.state.dataSource];    
  
    temp.push({
      id: 'a',
      key: 'a',
      jobName: 'a',
      jobGroup: 'a',
      jobStatus: '2', 
      owner:'zs',
      desc: 'desc',
    });

    this.setState({
      dataSource : temp,
    });
   
  }

重新建一个list对象，这时temp的引用和this.state.dataSource的引用不同，在this.setState方法中，React认为是改变了dataSource，因此会重新渲染页面。

3. 每次重新渲染Table时，Table的columns也会重新渲染。