【antd】解决Table组件改变dataSource没有重新渲染问题记录

场景

维护一个state，类型为tree结构，Table组件中dataSource要绑定这个树的cur指针指向的某个节点下的子节点数组。

当我准备删除某个节点时，却发现视图上没有变化。我最开始怀疑是react没有检测到state变化，所以没有rerender，自己自制了forceupdate方法，见我另一篇博文：《函数组件强制渲染 模仿forceUpdate》，使用forceUpdate确实能强制令视图更新。

且，我在视图层打印dataSource绑定的数据也能发现，确实是更新，数据有变化，但是Table组件就是没有更新。

   </div>
          {(() => {
            console.log('tree.currentNode.subset', tree.currentNode.subset);
          })()}
          <Table
            scroll={{ y: 300 }}
            // pagination={toJS(store.pagination)}
            columns={columns}
            rowKey={(data) => data.pId}
            dataSource={tree.currentNode.subset}
          />

解决方案

所以就定位到，是Table组件中对dataSource这个属性有处理。因为删除子节点，并没有修改cur指针，只是删掉了cur指针下的某个子节点。所以在Table中，更新前后由于cur指针没变，浅比较没有变化，所以Table没有更新。

所以，在每次render的时候，要用新指针重新指向子节点数组，比如：

  const tableList = tree.currentNode.subset ? [...tree.currentNode.subset] : [];

因为指针改变了，Table组件中的dataSource也会有变化，Table组件会重新渲染！