[英]Use .map() to iterate array inside a object React
我正在嘗試迭代對象數組中的 throw 元素,但由於返回的數據不是數組而是 Object,因此 .map() 不能以簡單的方式使用。
API 返回如下結構
/玩家(端點)
{
"players": [
{
"player_id": "Uy2sZ5ef",
"player_name": "Foo",
"player_team": "5c50bae023213348c4453aaf"
},
{
"player_id": "h15sqI4D",
"player_name": "Foo 2",
"player_team": "5c50bae023213348c4453aaf"
}
]
}
反應組件
export class Players extends Component {
state = {
players: []
}
componentDidMount() {
API.get(`players/`).then(res => {
console.log(res)
this.setState({ players: res.data })
})
}
render() {
return (
<section className="contents">
{ this.state.players.map(player => <li>{player.player_name}</li>)}
</section>
);
}
}
如果您的數據看起來像 object,並且您只需要播放器,您應該:
componentDidMount() {
API.get(`players/`).then(res => {
console.log(res)
this.setState({ players: res.data.players }) // <-- get only the players
})
}
您可能對功能組件感興趣:
const Players = () => {
const [players, setPlayers] = useState([]);
useEffect(() => {
API.get(`players/`).then(res => {
console.log(res);
setPlayers(res.data.players); // <-- get only the players
});
}, []);
return (
<section className="contents">
{players.map(player => (
<li>{player.player_name}</li>
))}
</section>
);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.