如何在React中正确引用数组值并在react-table展示目标API数据

嘿，你已经离成功不远了！能把API数据拿到本地展示已经完成了大半，现在只需要解决两个小细节：过滤掉不需要的条目，以及正确取出数组格式字段里的值。

先看你的数据结构：返回的是一个长度为4的数组，其中第0项是你需要的行程数据，而1-3项都是带Servertime、Traincode的元数据，完全不需要展示。另外你注意到的objStationD["0"].Origin方向是对的，但要注意Origin本身是个单元素数组（比如["Dublin Connolly"]），得再取数组的第0项才能拿到实际文本。

给你调整后的代码，直接就能用：

// 先过滤掉不需要的数据，只保留包含Origin字段的条目
const validTrainData = this.state.data.filter(item => item.Origin);

return (
  <Table dark>
    <thead>
      <tr>
        <th>Origin</th>
        <th>Due date</th>
        <th>Destination</th>
        <th>Due</th>
      </tr>
    </thead>
    <tbody>
      {validTrainData.map(train => (
        // 给每个列表项加唯一key，符合React渲染规范
        <tr key={train.Origin?.[0]}>
          {/* 取出数组中的第一个元素展示 */}
          <th scope="row">{train.Origin[0]}</th>
          <td>{train.Origintime[0]}</td>
          <td>{train.Destination[0]}</td>
          <td>{train.Duein}</td>
        </tr>
      ))}
    </tbody>
  </Table>
);

这里几个关键优化点：

• 数据过滤：用filter(item => item.Origin)自动筛掉那些不带Origin的无关条目，这样就不会把1-3项的元数据渲染出来；
• 数组取值：因为Origin、Origintime这些字段都是数组格式，所以用[0]直接取第一个元素，就能展示你要的文本内容；
• 安全防护：用可选链?.（比如train.Origin?.[0]），如果API返回偶尔缺失字段，也不会直接报错崩溃；
• 添加key：React列表渲染要求每个子元素有唯一key，这里用起点名称当key，简单又唯一。

如果后续API返回的数组长度变化，或者有多个有效行程，这个写法也能自动适配，不用改代码~

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