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

我想在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>

{${this.state.professorname}}教授的课程
{`对课程的评论`}
{`对教授的评论`}
{this.state.courses.map（（课程，i）=>(
{课程名称}
))}
{this.state.comments[i].map（（comment，j）=>{
{this.state.comments[i][j]}

})}

---

我真的可以帮上忙。谢谢

第二个循环超出了第一个循环的范围-它无法访问

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) => (
             <td key={j}>
                <p>{this.state.comments[i][j]}</p>
             </td>
          ))}
      </>
    ))}                                   
</tr> 

{this.state.courses.map（（课程，i）=>(
{课程名称}
{this.state.comments[i].map（（comment，j）=>(
{this.state.comments[i][j]}

))}
))}                                   

我可以从您的代码中看出两个问题

第一个循环中的第一个

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> 

{this.state.courses.map（（课程，i）=>(
{课程名称}
{this.state.comments[i].map（（comment，j）=>{
返回(
{this.state.comments[i][j]}

)
})}
))}                                   

Hi@kind user，非常感谢您的回复。但是，我更改了您建议的代码。这是错误消息：预期是赋值或函数调用，但看到的却是

@SkipperLin的表达式哦，当然-您也有语法错误-只需将

{

替换为

（

==>

{This.state.comments[i].map（（comment，j）=>（

Hi@kind user，这很有意义。明白。一个后续问题：从技术上讲，我希望每个数组的数据都显示在一列中；但是，现在

this.state.courses

的数据显示在一行中。非常感谢。@SkipperLin-Hmm，这个问题实际上值得一个新问题：）因为你需要重组你的表（取决于你的需要）。你可能应该尝试用tr代替td。我会试试的！非常感谢。