react-table单元格不显示数据 值为undefined如何解决

按以下优先级逐一排查修复即可： #

1. 修复错误的hook导入路径 #

你当前代码中从包内dist子路径导入useTable是核心诱因：

// 错误写法：直接引用内部构建产物会破坏react-table内部的状态绑定逻辑
import { useTable } from 'react-table/dist/react-table.development'

替换为标准导入语法：

// 正确写法：从包入口导入，会自动匹配对应环境的构建产物
import { useTable } from 'react-table'

该错误会直接导致表格仅能根据data长度渲染正确行数、表头，但列与数据字段的映射逻辑完全失效，因此所有单元格的value都会是undefined。

2. 校验列配置的accessor属性 #

如果修正导入后问题仍存在，检查列配置文件LandingTableColumns导出的COLUMNS数组：

• 所有展示数据的列必须配置accessor属性
• accessor的取值必须和MOCK_DATA中的字段名完全匹配，严格区分大小写，react-table不会做字段名的模糊匹配，字段名写错、大小写不匹配都会导致取值为undefined

正确的列配置示例：

export const COLUMNS = [
  {
    Header: '序号',
    accessor: 'id' // 对应mock数据中的id字段，若mock中字段为userId，此处写id就会取值失败
  },
  {
    Header: '名称',
    accessor: 'name'
  }
]

3. 核对react-table版本匹配性 #

你参考的教程基于react-table v7.x版本编写，若项目中安装的是v8及以上版本（现更名为@tanstack/react-table），API存在破坏性变更，也会出现数据绑定异常。
执行以下命令查看本地安装版本：

npm list react-table

若版本号为8.x开头，可降级到v7稳定版适配教程代码：

npm uninstall react-table
npm install react-table@7.8.0

也可根据v8版本的官方文档调整表格实现逻辑。

注意：引入第三方npm包时，默认直接使用包名导入即可，不要手动指定dist目录下的内部文件路径，否则很容易出现模块实例不一致、上下文丢失、内部逻辑失效等难以排查的问题。

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