[英]ReactJS - Map inside a map
I am working on a ReactJS & Redux app.我正在开发 ReactJS 和 Redux 应用程序。 At some point, I have a list of elements (notes), each one of them having an array (subtasks).
在某些时候,我有一个元素列表(注释),每个元素都有一个数组(子任务)。 I would like to display all the elements, and for each of them, display the content of their array.
我想显示所有元素,并为每个元素显示其数组的内容。
I tried this:我试过这个:
render(){
return(
<div>
<h3>{this.props.match.params.user}'s board</h3>
<Link to={`/settings/${this.props.match.params.user}`}>
<button>Settings</button>
</Link>
<Link to={`/new/${this.props.match.params.user}`}>
<button>Add note</button>
</Link>
{
this.props.notes.map((item,index) =>
<Link to={`/details/${item.name}`}>
<h4 key={index}>{item.name}</h4>
item.subtasks.map((sub, subindex)=>
<p key={subindex}>{sub}</p>)
</Link>
)
}
</div>
);
}
But I got:但我得到了:
Uncaught ReferenceError: subindex is not defined
未捕获的 ReferenceError:未定义子索引
What's the right way to do it?正确的方法是什么?
You need to wrap second map
, inside {}
brackets like this 你需要像这样在
{}
括号内包装第二张map
{
this.props.notes.map((item,index) =>
<Link to={`/details/${item.name}`}>
<h4 key={index}>{item.name}</h4>
{
item.subtasks.map((sub, subindex) =>
<p key={subindex}>{sub}</p>)
}
</Link>
)
}
An example with Vanilla JavaScript you can implement same way in react as you wish.以Vanilla JavaScript为例,您可以根据需要实现相同的反应方式。
let users = [ { name: "Amoos", skills: ["PHP", "MySQL"] }, { name: "Rifat", skills: ["JavaScript", "React", "HTML"] } ]; users.map(( user, index ) => { console.log(`User: ${user.name}`) { user.skills.map(( skill, subIndex) => { console.log(`Skill # ${subIndex}: ${skill} `) }) } } )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.