search

VisActor / VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
https://visactor.io/vtable
MIT License
1.39k stars 95 forks source link

【Bug】CustomLayout 报错：Cannot destructure property 'col' of 'reactGroup' as it is null #2038

Open mzhang-eric opened 4 days ago

mzhang-eric commented 4 days ago

复现步骤：

  1. https://visactor.io/vtable/demo-react/custom-layout/cell-custom-layout-dom （单元格自定义组件+dom组件）

使用上述官网示例，return 方法中使用如下配置：

<ListTable
      records={records}
      height={900}
      select={
        {
          disableHeaderSelect: true,
        }
      }
      dragHeaderMode="column"
      // rowSeriesNumber={{title: '序号'}}
      ReactDOM={ReactDom}
    >
      <ListColumn field={'bloggerId'} title={'ID'} />
      <ListColumn field={'bloggerName'} title={'Name'} width={220}>
        <UserProfileComponent role={'custom-layout'} />
      </ListColumn>
      <ListColumn field={'fansCount'} title={'Fan'} />
      <ListColumn field={'worksCount'} title={'Work'} />
      <ListColumn field={'viewCount'} title={'View'} />
    </ListTable>

  1. 拖拽表头换位，此时报错：Cannot destructure property 'col' of 'reactGroup' as it is null

  2. 解除上述代码中行序号的配置注释，rowSeriesNumber={{title: '序号'}}，此时也会报错：Cannot destructure property 'col' of 'reactGroup' as it is null

【总结】在React项目中使用该示例发现，如果使用了 CustomLayout，此时如果设置行序号，会直接导致页面崩溃，或者进行拖拽行换位也会导致出现相同错误

image