React useTable钩子通过axios请求Spring Boot后端数据时表格偶发不显示

你代码里存在两处核心错误导致表格渲染异常：

• 第一处：表头渲染的map回调没有返回值
  你在headerGroups.map的回调里使用了大括号包裹逻辑，但没有显式return tr元素，导致表头部分返回undefined，触发表格整体渲染异常。
• 第二处：useMemo依赖项配置错误
  你声明data变量的useMemo依赖项为空数组，当接口请求完成更新product状态后，useMemo不会重新计算返回最新的product值，useTable拿到的始终是初始的空数组，自然渲染不出数据。

// 1. 修正headerGroups.map的返回逻辑，将大括号改为小括号使用隐式返回，也可以保留大括号加return关键字
<thead>
  {headerGroups.map((headerGroup) => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map((column) => (
        <th {...column.getHeaderProps()}>
          {column.render('Header')}
        </th>
      ))}
    </tr>
  ))}
</thead>

// 2. 修正useMemo的依赖项，把product加到依赖数组中，状态更新时自动重新计算
const data = useMemo(() => product, [product])

如果修改后仍有偶现异常可以检查：

• 引入的COLUMNS配置是否和接口返回的product字段完全匹配，字段名拼写、大小写是否一致
• 确认接口返回的response.data确实是数组格式，没有被外层对象包裹

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