使用react-table的useTable钩子时传入数据但表格不展示内容如何解决

问题原因&解决步骤 #

你遇到的表头正常但无行数据的问题，有3个常见的可直接排查的原因，按优先级依次核对即可：

• 原因1：columns配置的accessor和data对象的字段不匹配
  这是最常见的触发原因，react-table会自动过滤掉没有对应accessor字段的行数据，哪怕你传入的data本身有值，只要accessor和data对象的key不完全匹配（大小写也要一致），就会返回空的rows数组。
  比如你的data项结构是{name: "BTC", price: 30000}，但columns里的accessor写的是coinName、coinPrice，就会触发该问题，直接修改accessor和data字段保持一致即可。
• 原因2：传入的data不符合格式要求
  确认你传入Table组件的data是数组类型，初始值要设置为[]，不要设置为null/undefined。如果是接口返回的数据，检查赋值时有没有多套一层结构，比如把res.data.list错写为res导致实际传入的不是数组。你可以在Table组件内加一行打印验证：

  console.log("是否为数组：", Array.isArray(data), "数组长度：", data.length)
  

• 原因3：react-table版本不兼容
  你当前写的是react-table v7版本的语法，如果项目安装的是v8版本，useTable的返回结构会不一致，导致取不到正确的rows数据。你可以查看package.json中react-table的版本号，如果是v8版本，可以降级到v7版本解决：

  npm install react-table@7.8.0
  

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