如何从 api react js 和 axios 获取更多信息

Question

如果我想从球员那里获得更多信息，例如姓氏、身高、体重。我怎么做？这是api：

{"id":237,"first_name":"LeBron","height_feet":6,"height_inches":8,"last_name":"James","position":"F","team": {"id":14,"abbreviation":"LAL","city":"Los Angeles","conference":"West","division":"Pacific","full_name":"Los Angeles Lakers", "name":"Lakers"},"weight_pounds":250}

const App = () => {
  const[playerName, setPlayerName] = useState([]);
  const[playerName1, setPlayerName1] = useState([]);
  const[playerName2, setPlayerName2] = useState([]);
  const[playerPic, setPlayerPic] = useState([]);
  const[playerPic1, setPlayerPic1] = useState([]);
  const[playerPic2, setPlayerPic2] = useState([]);


  const fetchData = () => {
    const playerAPI = 'https://www.balldontlie.io/api/v1/players/237'
    const playerAPI1 = 'https://www.balldontlie.io/api/v1/players/47'
    const playerAPI2 = 'https://www.balldontlie.io/api/v1/players/237'
    const playerPic = 'https://nba-players.herokuapp.com/players/james/lebron'
    const playerPic1 = 'https://nba-players.herokuapp.com/players/bird/jabari'
    const playerPic2 = 'https://nba-players.herokuapp.com/players/jackson/Demetrius'

    const getNBAPlayer = axios.get(playerAPI)
    const getNBAPlayer1 = axios.get(playerAPI1)
    const getNBAPlayer2 = axios.get(playerAPI2)
    const getPlayerPic = axios.get(playerPic)
    const getPlayerPic1 = axios.get(playerPic1)
    const getPlayerPic2 = axios.get(playerPic2)

    axios.all([getNBAPlayer, getNBAPlayer1, getNBAPlayer2, getPlayerPic, getPlayerPic1, getPlayerPic2]).then(
      axios.spread((...allData) => {
        const allDataPlayer = allData[0].data.first_name
        const allDataPlayer1 = allData[1].data.first_name;
        const allDataPlayer2 = allData[2].data.first_name;
        const getNBAPlayerPic = allData[3].config.url;
        const getNBAPlayerPic1 = allData[4].config.url;
        const getNBAPlayerPic2 = allData[5].config.url;
        
        setPlayerName(allDataPlayer)
        setPlayerName1(allDataPlayer1)
        setPlayerName2(allDataPlayer2)
        setPlayerPic(getNBAPlayerPic)
        setPlayerPic1(getNBAPlayerPic1)
        setPlayerPic2(getNBAPlayerPic2)
      })
    )
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <div className="App">
      <ul>
        <li>
          Player name is: {playerName}
          <img src={playerPic} alt="img" />
        </li>
        <li>
          Player name is: {playerName1}
          <img src={playerPic1} alt="img" />
        </li>
        <li>
          Player name is: {playerName2}
          <img src={playerPic2} alt="img" />
        </li>
      </ul>
      
      
    </div>
  );
}

export default App;

Answer 1

您使用的状态过多。这不是干净和可读的代码，而且这是一个复杂的逻辑来逐个获取玩家。您可以将整个数据设置为一个状态，然后使用 map() 函数将您的状态转换为列表，而不是这样做。我建议你阅读 ReactJS 关于这个主题的文档。 https://reactjs.org/docs/lists-and-keys.html

我为你创建了一个项目。它显示了如何管理状态，因此请检查它。你可能明白了。 https://stackblitz.com/edit/react-8acmxv?file=src%2FApp.js