react-table使用自定义数据时useTable报data未定义如何解决

问题原因 #

react-table的useTable钩子要求配置对象中数据源对应的键名为data，你当前代码中传入的键名为items，钩子内部读取不到对应配置就会抛出data is undefined错误，和你传入的数组本身是否有值、是否做了memo化都没有关系。

修复方案 #

修改useTable的入参，将items映射为data字段即可：

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
} = useTable({ columns, data: items }, useSortBy);

你也可以直接把状态变量的命名从items改成data，传入的时候就可以直接写{ columns, data }，效果完全一致。

内容的提问来源于stack exchange，提问作者Chris