React 从两个不同 API 获取数据并渲染同一表格的实现及问题排查

现有代码的具体问题 #

• 方法调用大小写不匹配：类中定义的方法名是首字母大写的Displayauthors，但渲染时调用的是小写开头的this.displayAuthors，JS 对大小写敏感会直接触发“方法不存在”的报错，功能自然无法运行
• 渲染逻辑错位：目前不管遍历到哪一本图书，都会把authors数组里所有的genre全部塞到当前行的Genre单元格里，哪怕接口数据正常返回，最终所有行的Genre列内容都会完全一致，和表格单条数据对应单条类型的展示逻辑完全不符
• 数据关联逻辑缺失：两个API返回的是独立的books和authors数组，没有通过共同的关联字段（比如每本书绑定的authorId、bookId）做匹配，本质上没有建立图书和对应genre的绑定关系
• 请求写法不规范：嵌套的fetch回调没有校验接口返回状态，也没有错误捕获，接口异常时会出现不可预期的渲染错误

具体修正步骤 #

1. 统一方法命名：把类中定义的Displayauthors改成和调用时一致的小写开头displayAuthors，或者反过来把调用处的方法名改成和定义一致的大写，保证JS能正确找到对应方法
2. 建立数据关联：等两个接口的数据都拿到之后，遍历books时根据关联字段匹配对应作者的genre，而不是把全量authors数组丢进去渲染。典型的匹配逻辑为：通过图书携带的关联ID，从authors数组中找到对应记录，取出genre值渲染，不需要额外遍历全量作者列表
3. 优化请求流程：用Promise.all统一等待两个接口都返回成功后再更新state，同时给fetch加上基础的状态校验和错误捕获，避免中间态渲染异常

修正后的核心代码片段 #

componentDidMount() {
  // 用Promise.all统一管理两个请求
  Promise.all([
    fetch('/url1').then(res => {
      if(!res.ok) throw new Error('图书数据获取失败')
      return res.json()
    }),
    fetch('/url2').then(res => {
      if(!res.ok) throw new Error('作者数据获取失败')
      return res.json()
    })
  ]).then(([bookData, authorData]) => {
    this.setState({
      books: bookData,
      authors: authorData
    })
  }).catch(err => {
    console.error('数据加载失败:', err)
  })
}

// 表格渲染逻辑部分
<tbody>
  {books.map((book) => {
    // 根据当前图书携带的authorId，匹配对应作者的作品类型
    const currentGenre = this.state.authors.find(item => item.authorId === book.authorId)?.genre
    return (
      <tr key={book.id}>
        <td>{book.number}</td>
        <td>{book.name}</td>
        <td>{currentGenre || '暂无类型'}</td>
        <td><button type="button">Download</button></td>
      </tr>
    )
  })}
</tbody>

注意：如果两个接口返回的数据没有对应的关联字段，需要先确认接口的返回结构——比如genre是不是直接在book接口的返回字段里、还是作者接口里的genre需要通过book上的某个标识匹配，没有关联关系的话是无法把两个数据源的内容拼接渲染到同一行的。

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