使用相同的索引来映射React.js中的两个数组

Question

我想在React中显示一个表格。 第一列是教授教授的所有课程，第二列是与该课程相关的最多三个注释。 所有课程的数据都存储在

this.state.courses

所有评论都是嵌套数组映射到课程顺序。 访问第一门课程的评论是

this.state.comments[0]

我的代码目前无法正常工作，但这是我的尝试

                    <Table striped bordered hover>
                        <thead>
                            <tr>
                                <th>{`Courses Taught By ${this.state.professorname}`}</th>
                                <th>{`Comments on Course`}</th>
                                <th>{`Comments on Prof`}</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                {this.state.courses.map((course, i) => (
                                    <td key={i}>
                                        <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
                                    </td>
                                ))}
                                {this.state.comments[i].map((comment, j) => {
                                    <td key={j}>
                                        <p>{this.state.comments[i][j]}</p>
                                    </td>
                                })}
                            </tr> 
                        </tbody>
                    </Table>

我真的可以为这个提供帮助。 谢谢！

Answer 1

第二个循环不在第一个循环的范围之内-它无法访问i 。

您应该将第二张map移到第一张map内，以便能够访问它。

<tr>
    {this.state.courses.map((course, i) => (
       <>
          <td key={course._id}>
             <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
          </td>
          {this.state.comments[i].map((comment, j) => (
             <td key={j}>
                <p>{this.state.comments[i][j]}</p>
             </td>
          ))}
      </>
    ))}                                   
</tr> 

Answer 2

我可以在您的代码中看到两个问题。

第一个循环中的第一个i在第二个循环中不可用（超出范围）。

其次，您在第二个地图函数中未返回任何内容。

<tr>
{this.state.courses.map((course, i) => (
   <>
      <td key={course._id}>
         <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
      </td>
      {this.state.comments[i].map((comment, j) => {
  return (
         <td key={j}>
            <p>{this.state.comments[i][j]}</p>
         </td>
      )
   })}
  </>
))}                                   
</tr>