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>
我真的可以为这个提供帮助。谢谢!
解决方案
第二个循环超出了第一个循环的范围 - 它无权访问i
.
您应该将第二个移到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>
推荐阅读
- json - 从 Firebase Swift 中读取两个数据模型
- javascript - 使隐藏元素的列表可见
- javascript - 如何在 Javascript 中获取 HTML 的输出
- reactjs - 使用 Typescript 的 React-Redux 提供者推理?
- python - 模块“熊猫”没有属性“tslib”
- c# - 我可以在一台机器上同时使用 Visual Studio 2010 和 2017 的 Crystal Report 吗?
- oracle - 使用显式游标和循环,找不到错误
- ios - 无法加载搜索结果 - Google 地方信息
- python-imaging-library - 为什么 favicon 形状为 16x16x4,whatsapp favicon 有什么问题?
- python - Python按列名获取熊猫数据