Как отображать конкретные данные из вызова axios в Reactjs

#reactjs #axios #state #render

#reactjs #axios #состояние #визуализация

Вопрос:

нужна помощь.

Я делаю запрос «get», используя axios в React для API NFL, а затем я отправляю ответ на веб-страницу. Я хочу отображать только игроков, чьи позиции QB, RB и WR. Мне не нужны все другие игроки. Вот пример того, как выглядит объект one player в моем запросе get:

 
    {
        "PlayerID": 20841,
        "Team": "NYG",
        "Number": 8,
        **"Position": "QB",**
        "Height": "6'5",
        "Weight": 221,
        "Name": "Daniel Jones"
    }

Я могу выполнить вызов API (я удалил URL-адрес из playersURL) и обновить состояние «данных» с помощью ответа. Оттуда я могу установить состояние и отобразить всех игроков. Но я не знаю, как отображать только игроков, соответствующих параметрам позиции. Есть идеи? Спасибо!!

 
    import React from "react";
    import "./General.css";
    const axios = require("axios");

    export default class General extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          loading: true,
          data: []
        };
      }

      getData() {
        const playersURL =
          "";
        axios.get(playersURL).then((res) => {
          var data = res.data;

          for (var i = 0; i < data.length; i  ) {
            var playerPosition = data[i].Position;

            if (
              playerPosition === "QB" ||
              playerPosition === "RB" ||
              playerPosition === "WR"
            ) {
                console.log(playerPosition)
            }
          }

          this.setState({ data: data, loading: false });
        });
      }

      async componentDidMount() {
        this.getData();
      }

      render() {
        
        if (this.state.loading) {
          return <div className='loadingDiv'>Calling the API, one moment please!</div>;
        }

        return (
          <div className="container">
              {this.state.data.map((d) => (
                <div className="playerDiv" key={d.PlayerID}>
                  {d.PlayerID} - {d.Name} - {d.Position} - {d.Team}
                </div>
              ))}
          </div>
        );
      }
    }

1. Похоже, вы хотите отфильтровать игроков в определенной позиции, верно?

2. Точно. Я хочу отображать только игроков, позиция которых ‘QB’, ‘RB’ и ‘WR’. Я могу перебирать данные и регистрировать их в консоли, но в нем регистрируются только позиции, а не остальная информация, такая как идентификатор игрока, имя или команда.

3. Я понимаю, вы можете увидеть, соответствует ли мой ответ тому, что вы хотите

Ответ №1:

попробуйте это, отфильтруйте данные ответа в обещании. затем

 getData() {
  const playersURL = "";
  axios.get(playersURL).then((res) => {
    const data = res.data;
    this.setState({
      data: data?.filter(player => ['QB', 'RB', 'WR'].includes(player.Position)),
      loading: false
    });
  });
}

Если объем данных ответа не слишком велик, вы также можете поместить фильтр в render

 render() {
  if (this.state.loading) {
    return <div className='loadingDiv'>Calling the API, one moment please!</div>;
  }

  const filterData = this.state.data?.filter(d =>
    ['QB', 'RB', 'WR'].includes(d.Position)
  )

  return (
    <div className="container">
        {filterData.map((d) => (
          <div className="playerDiv" key={d.PlayerID}>
            {d.PlayerID} - {d.Name} - {d.Position} - {d.Team}
          </div>
        ))}
    </div>
  );
}

Ответ №2:

     axios.get(playersURL).then((res) => {
      var data = res.data;
      const filteredData = data?.filter(player => player.Position === "QB" || 
                                       player.Position === "RB" || 
                                       player.Position === "WR" );

      this.setState({ data: filteredData , loading: false });
    });