使用 .map() 在对象 React 中迭代数组

Question

我正在尝试迭代对象数组中的 throw 元素，但由于返回的数据不是数组而是对象，因此无法以简单的方式使用 .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>
        );
    }
}

Answer 1

您可能对功能组件感兴趣：

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>
  );
};

Answer 2

如果您的数据看起来像那个对象，并且您只需要玩家，您应该：

    componentDidMount() {
    API.get(`players/`).then(res => {
            console.log(res)
            this.setState({ players: res.data.players }) // <-- get only the players
        })
    }