Question

对象作为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>
    )
}

这是否意味着我不能有这样的嵌套对象？似乎有点限制。像这样存储数据似乎是合乎逻辑的-俱乐部是一组对象，每个对象都是一支足球队，他们在那个赛季打过比赛。

谢谢

Answer 1

写作时

<div>Games Played: {key.gamesPlayed.home}</div>

您基本上告诉react创建具有两个孩子的div元素：

字符串“玩过的游戏：”，
无论key.gamesPlayed.home存储什么，在这种情况下，它都是一个数组（基本上只是javascript中的一个对象）！

另一方面，要求任何组件的子代必须是字符串或另一个组件。数组并非如此。因此，为了使其工作，您必须遍历数组并呈现每个数组元素的相应部分。在我看来，替换上面这段代码的简短示例是

<div>
  {key.gamesPlayed.map(game => (
    <div>{game.homeTeam}</div>
  )}
</div>

（假设game.homeTeam是一个字符串！）

在React状态下使用嵌套对象

1 个答案: