Реакция хранения значений в состоянии из вызова API - PullRequest
Новая
       6

Реакция хранения значений в состоянии из вызова API

0 голосов
/ 02 апреля 2020

Я создаю небольшой сайт React, который выполняет вызов API для получения данных, основанных на NBA. API, который я использую, имеет конечную точку для команд и одну для игроков. У каждого игрока есть идентификатор команды. В моем штате есть свойство team, в котором хранится множество команд. Сначала я получаю все команды с конечной точки команды API и храню все эти команды в состоянии. Затем я провожу еще один вызов API, чтобы получить всех игроков и передать логин c до l oop через игроков и сохранить игроков против их соответствующих команд в состоянии. Я борюсь с запоминанием игроков.

(sidenote - можно ли хранить такие данные в состоянии. В данный момент я стараюсь избегать использования БД, так как хочу просто сосредоточиться по изучению React). 

import React from 'react';
import Header from './Header';
import Teams from './Teams';
import axios from 'axios';

export default class NbaApp extends React.Component {
  state = {
    teams: [],
  }

  componentDidMount() {

    // api call to get teams
    axios({
      "method": "GET",
        "url": "https://free-nba.p.rapidapi.com/teams",
        "headers": {
            "content-type": "application/octet-stream",
            "x-rapidapi-host": "free-nba.p.rapidapi.com",
            "x-rapidapi-key": "4b928dc015msh61ceaa78bb9aef7p13abdajsned903302b662"
        }, "params": {
            "page": "0"
        }
      })
      .then((response)=>{
        const teams = response.data.data;
        teams.map((team) => {
          this.setState(() => ({
            teams: this.state.teams.concat(team)
          }));
        })
      })
      .catch((error)=>{
        console.log(error)
      })

    const playersArray = [];
      // api call to get players
    axios({
        "method":"GET",
        "url":"https://free-nba.p.rapidapi.com/players",
        "headers":{
            "content-type":"application/octet-stream",
            "x-rapidapi-host":"free-nba.p.rapidapi.com",
            "x-rapidapi-key":"4b928dc015msh61ceaa78bb9aef7p13abdajsned903302b662"
        },"params":{
            "page":"0",
            "per_page":"100"
        }
      })
      .then((response)=> {
        this.pages = response.data.meta.total_pages;
        //console.log(this.pages);
        for(let i = 0; i <= this.pages; i++){
          axios({
            "method":"GET",
            "url":"https://free-nba.p.rapidapi.com/players",
            "headers":{
                "content-type":"application/octet-stream",
                "x-rapidapi-host":"free-nba.p.rapidapi.com",
                "x-rapidapi-key":"4b928dc015msh61ceaa78bb9aef7p13abdajsned903302b662"
            },"params":{
                "page": + i,
                "per_page":"100"
            }
          })
          .then((response) => {
            this.teamPlayers = response.data.data;

            this.teamPlayers.forEach(e => {
                playersArray.push(e);
            });
            return playersArray;
          })

        }
        return playersArray;
      })
      .then((response) => {
        console.log(this.state.teams);
        this.state.teams.map(team => {

          const teamPlayers = [];

          response.map(player => {

            if (player.team.id === team.id) {
                teamPlayers[player.id] = player;
            }
          });

          // It's this section that I'm struggling with.
          // this.setState((team) => ({
          //   
          // }));
        });

      .catch((error)=>{
        console.log(error)
      })
  }

  render() {
    return (
      <div>
        <Header />
        <Teams
          teams={this.state.teams}
        />
      </div>

    )
  }
}

Комментарий в примере кода «С этим разделом я борюсь.», я знаю, что здесь нужно установить состояние, но я изо всех сил пытаюсь обернуть голову вокруг, как это сделать. Мне нужно добавить свойство 'Players' для каждой команды, а затем заполнить его соответствующими игроками.

Console.log this.state.teams: 

0:
  id: 1
  abbreviation: "ATL"
  city: "Atlanta"
  conference: "East"
  division: "Southeast"
  full_name: "Atlanta Hawks"
  name: "Hawks"
__proto__: Object
1:
  id: 2
  abbreviation: "BOS"
  city: "Boston"
  conference: "East"
  division: "Atlantic"
  full_name: "Boston Celtics"
  name: "Celtics"
  __proto__: Object

Я надеюсь, что это сообщение имеет смысл.

Спасибо

...