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

Posted 2023-02-14

【中文标题】使用 .map() 在对象 React 中迭代数组

【英文标题】：Use .map() to iterate array inside a object React

【发布时间】：2020-10-05 11:07:09

【问题描述】：

我正在尝试迭代对象数组中的 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>
        );
    

【参考方案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>
  );
;

【讨论】：

确实我们都应该使用功能组件！

【参考方案2】：

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

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

【讨论】：

没错，我没找到。在 *** 延迟接受这个答案之后，我会这样做:)