React JS表格如何通过对比其他数组将绑定的ID替换为对应名称

完全可以实现，以下是两种常用的落地方式：

方式1：直接在渲染时匹配（适合小数据量场景） #

直接在表格遍历的逻辑中通过Array.find()匹配对应ID的条目，取出名称即可，代码示例如下：

<tbody>
  <tr>
    <td>country Name</td>
    <td>city Name</td>
  </tr>
  {this.state.table.map((item, index) => {
    const matchedCountry = this.state.countries.find(country => country.id === item.countryId);
    const matchedCity = this.state.cities.find(city => city.id === item.cityId);
    return (
      <tr key={index}>
        {/* 兜底展示短横线，避免ID不存在时渲染异常 */}
        <td>{matchedCountry ? matchedCountry.name : '-'}</td>
        <td>{matchedCity ? matchedCity.name : '-'}</td>
      </tr>
    )
  })}
</tbody>

方式2：预构建ID映射表（适合大数据量场景，性能更优） #

如果国家、城市数组条目多，或者表格行数多，每次渲染都遍历数组匹配会有性能损耗，可以提前把ID和名称的映射关系整理成对象，取值时间复杂度为O(1)：

第一步：构建映射表 #

可以在组件渲染前、state更新时生成映射表：

const countryIdToName = this.state.countries.reduce((prev, curr) => {
  prev[curr.id] = curr.name;
  return prev;
}, {});

const cityIdToName = this.state.cities.reduce((prev, curr) => {
  prev[curr.id] = curr.name;
  return prev;
}, {});

第二步：表格渲染直接取值 #

<tbody>
  <tr>
    <td>country Name</td>
    <td>city Name</td>
  </tr>
  {this.state.table.map((item, index) => {
    return (
      <tr key={index}>
        <td>{countryIdToName[item.countryId] || '-'}</td>
        <td>{cityIdToName[item.cityId] || '-'}</td>
      </tr>
    )
  })}
</tbody>

内容的提问来源于stack exchange，提问作者Sai Manoj v