如何在我的 React 应用程序中访问 API 的属性？

Question

I am new to web development, and cant figure out how to access the properties of my API. The API I am using provides with me the information of football teams. Given is the Schema and link of the API: https://rapidapi.com/api-sports/api/api-football?endpoint=apiendpoint_bc5e37ef-299f-4656-98a3-ed0d9fa5b1d2

Given is my App.js code for the react application.

import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      teamObj:{}
    };
  }


  componentDidMount() {
    fetch("https://api-football-v1.p.rapidapi.com/v2/teams/team/33", 
          {"method": "GET","headers": 
            {"x-rapidapi-host": "api-football-v1.p.rapidapi.com",
            "x-rapidapi-key": "a35b8572b7mshe694b9e8ac66df4p158c4bjsn4518b48e8965"}
          }
        )
    .then(response => response.json())
    .then(data => this.setState({teamObj : data}))
  }

  render() {
    return (
      <div>
        <h1>My fav team is: {this.state.teamObj.name}</h1>
      </div>
    );
  }
}

export default App;

Answer 1

import React from 'react';

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            teamObj: {}
        };
    }

    componentDidMount() {
        fetch('https://api-football-v1.p.rapidapi.com/v2/teams/team/33', { method: 'GET', headers: { 'x-rapidapi-host': 'api-football-v1.p.rapidapi.com', 'x-rapidapi-key': 'a35b8572b7mshe694b9e8ac66df4p158c4bjsn4518b48e8965' } })
            .then((response) => response.json())
            .then((data) => this.setState({ teamObj: data }));
    }

    render() {
        const data = this.state.teamObj;
        if (!data) return <div>Loading...</div>;
        const teamData = data.api && data.api.teams && data.api.teams.length > 0 ? data.api.teams : [];

        return (
            <div>
                <h1>
                    My fav teams is:{' '}
                    {teamData.map((x) => {
                        return <div>{x.name}</div>;
                    })}
                </h1>
            </div>
        );
    }
}

export default App;

Answer 2

data is an object, to access the teams array you need to use data.api.teams which is the array of the teams. To access the first team in the array use data.api.teams[0]

Change teamObj to teams.

state = {
  teams: []
}

componentDidMount() {
  fetch("https://api-football-v1.p.rapidapi.com/v2/teams/team/33", {
    method: "GET",
    headers: {
      "x-rapidapi-host": "api-football-v1.p.rapidapi.com",
      "x-rapidapi-key": "a35b8572b7mshe694b9e8ac66df4p158c4bjsn4518b48e8965"
    }
  })
    .then(response => response.json())
    .then(data => {
      this.setState({teams : data.api.teams })
    });
}

Render it like, team array will always contain one item, since you are passing the id of the team in your request. Access the team from the array with this.state.teams[0].name

<h1>My fav team is: { this.state.teams.length && this.state.teams[0].name }</h1>

Answer 3

Try This

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      teamObj:null
    };
  }


  componentDidMount() {
    fetch("https://api-football-v1.p.rapidapi.com/v2/teams/team/33", 
          {"method": "GET","headers": 
            {"x-rapidapi-host": "api-football-v1.p.rapidapi.com",
            "x-rapidapi-key": "a35b8572b7mshe694b9e8ac66df4p158c4bjsn4518b48e8965"}
          }
        )
    .then(response => response.json())
    .then(data => {
      console.log(data)
      this.setState({teamObj : data.api.teams})
    })
  }

  render() {
    console.log(this.state.teamObj)
    return (
      <div>
        <h1>My fav team is: {
          this.state.teamObj && 
           this.state.teamObj[0].name 
          }</h1>
      </div>
    );
  }
}

export default App;