「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」

错误展示

上面一张图表格数据源是push的数组，下面图片是正常数据源

错误代码

state中的

 // 暂存所有数据
      arr: [],
      alldata: {
        pages: 0,
        total: 0,
        current: 1,
        records: [],
      },

页面加载数据

  loadallData = () => {
    const obj = {
      isvName: '',
      startTime: null,
      endTime: null,
      pageForm: {
        pageNo: this.state.alldataPageno,
        pageSize: 10,
        order: 'desc',
      },
    };
    Manager.TenantList(obj).then(
      res => {
        this.setState({ alldata: res }, () => {
          const len = res.records.length;
          for (let i = 0;i < len;i++) {
            this.state.arr.push(res.records[i]);
          }
          // push修改了arr，但是没有触发render的更新，这个地方如果不setState,在后面的表格引用中显示不出来数据
          // this.setState({ arr: [...this.state.arr] });
        });
        const { pages, current } = this.state.alldata;
        if (current < pages) {
          this.setState({ alldataPageno: current + 1 }, () => {
          });
          this.loadallData();
        }
      },
      () => {
        console.log('加载失败！');
      },
    );
  }

render函数

<Table 
    columns={columns} 
    rowKey={record => record.id} 
    dataSource={arr} />

分析&解决

this.state.arr.push(res.records[i]);
这行代码对state中的arr数组进行了修改，但是没有及时渲染，需要render后才能正常显示。大佬说，react和vue不一样，vue是双向流，react是单向数据流。尝试过react强制更新函数this.forceUpdate()这个不行，需要this.setState手动刷新。 解决方法：this.setState({ arr: [...this.state.arr] });

拓展（vue和react各自的优势）

Vue 的优势有：
灵活选择模板或渲染函数。语法和项目设置简单。渲染速度更快，尺寸更小。
React 的优势：
更适合大应用，更健壮，更易测试。Web 和原生应用。更大的生态系统，支持和工具更多。
大多数最佳特性都是类似的：
使用虚拟 DOM 进行快速渲染。轻巧。反应性组件。服务端渲染。容易与路由器、打包器和状态管理集成。很好的社区和支持。

结果