无法使用React的map函数遍历从Laravel API获取存入useState的表格数据

问题根因 #

核心问题是你调用Laravel接口返回的data本身就是二维数组结构，使用setTab([...tab, data])写法会把整个二维数组当成单个元素追加到原数组末尾，最终tab会变成三维数组，直接对tab做第一层map遍历拿到的是子数组，不是你需要的业务对象，所以无法正常遍历渲染。

解决方案 #

方案1：拉取数据时先展平再存入state #

如果你的需求是把所有接口返回的业务对象都放在一维数组里方便直接遍历，存数据的时候先把返回的二维数组拍平：

// 接口请求成功回调内处理
const flatData = data.flat() // 把二维数组转为包含所有业务对象的一维数组
setTab([...tab, ...flatData]) // 展开拍平后的数组再追加，不要直接塞入整个data

处理完成后tab会变成[{id:4,...}, {id:7,...}]的一维结构，直接map即可正常遍历：

// 渲染逻辑示例
{tab.map(item => (
  <tr key={item.id}>
    <td>{item.libelle_analyse}</td>
    <td>{item.prix_unitaire}</td>
    {/* 剩余字段按需渲染 */}
  </tr>
))}

方案2：保留原二维结构嵌套遍历 #

如果你需要保留接口返回的二维结构，直接嵌套两层map遍历即可：

{tab.map((subArr, index) => (
  <React.Fragment key={index}>
    {subArr.map(item => (
      <tr key={item.id}>
        <td>{item.libelle_analyse}</td>
        {/* 剩余字段按需渲染 */}
      </tr>
    ))}
  </React.Fragment>
))}

额外排查点 #

如果调整后仍有问题可做如下校验：

• 确认接口返回的data是数组类型，不是JSON字符串，如果是字符串需先调用JSON.parse(data)转为数组再处理
• 遍历的时候必须给每一项添加唯一的key属性，否则React会抛出异常导致渲染异常

内容的提问来源于stack exchange，提问作者AHOBLE Simon pierre Kokou