使用另一个对象的属性作为关键字查找对象

Question

在我的React组件中，我有数组和对象：

topPlayers: [
{Name: 'User1', ...},
{Name: 'User2', ...}
]
players: {
User1: {},
User2: {},
...
}

这两个我都处于状态，在我看来，我想从players数组中显示顶级玩家的列表以及关于他们的其他信息。

render() {
return(
{Object.keys(this.state.topPlayers).map((key, i) => (
<div key={i}>
<span>{this.state.topPlayers[key].Name}</span>
<span>{this.state.topPlayers[key].Points}</span>
<span></span> 
</div>
))}
)
}

在最后一个span中，我想要来自像this.state.players[this.state.topPlayers[key].Name]这样的玩家阵列的绑定字段，但这不起作用。我是React的新手，所以我不明白自己做错了什么。

我将感谢你的帮助或任何提示。

Answer 1

您的topPlayers状态只是一个数组，因此您可以直接对其使用map。您可以直接在players对象上使用顶级玩家的Name作为密钥。

示例

class App extends React.Component {
state = {
topPlayers: [{ Name: "User1" }, { Name: "User2" }],
players: {
User1: { description: "foo" },
User2: { description: "bar" }
}
};
render() {
const { topPlayers, players } = this.state;
return (
<div>
{topPlayers.map((player, i) => (
<div key={i}>
<span>{player.Name}: </span>
<span>{players[player.Name].description}</span>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>