![](/img/trans.png)
[英]React - using nested objects as state with hooks to fill form data
[英]Using nested objects in React state
对象作为React子对象()无效。 如果要渲染子级集合,请使用数组
我收到上述错误,但我不完全理解它所传达的限制。 这是给我这个错误的代码,我有一个对象,其中一个属性具有对象数组的值:
state = {
clubs: [{
teamName: something,
gamesPlayed: [{
homeTeam: someName,
awayTeam: someNameElse,
score: numbers
},
{
homeTeam: ...
... etc
}]
}]
}
呈现代码的元素:
function RenderTest(props) {
return (
<ul>
<li>
<div>
<ul style={{paddingLeft: 10+'px'}}>
{props.clubs.map( (key, i) => (
<li>
<div>Team: {key.teamName} ID: {key.teamId}</div> <-- works as expected
<div>Games Played: {key.gamesPlayed.home}</div> <-- throws the error
</li>
))}
</ul>
</div>
</li>
</ul>
)
}
这是否意味着我不能有这样的嵌套对象? 似乎有点限制。 我这样存储数据似乎是合乎逻辑的-俱乐部是一组对象,每个对象都是一支足球队,他们在那个赛季打过比赛。
谢谢
当你写
<div>Games Played: {key.gamesPlayed.home}</div>
您基本上可以告诉react创建具有两个孩子的div元素:
key.gamesPlayed.home
存储什么,在这种情况下,它都是一个数组 (基本上只是javascript中的一个对象)! 另一方面,React要求任何组件的子代必须是字符串或其他组件。 数组并非如此。 因此,为了使其工作,您必须遍历数组并呈现每个数组元素的相应部分。 从我这边替换上面的代码的简短示例是
<div>
{key.gamesPlayed.map(game => (
<div>{game.homeTeam}</div>
)}
</div>
(假设game.homeTeam
是一个字符串!)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.