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

Question

我是 Web 开发的新手，不知道如何访问我的 API 的属性。我使用的 API 提供了足球队的信息。给出 API 的架构和链接： https ://rapidapi.com/api-sports/api/api-football?endpoint=apiendpoint_bc5e37ef-299f-4656-98a3-ed0d9fa5b1d2给定的是我的 React 应用程序的 App.js 代码。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是一个对象，要访问你需要使用的团队数组，data.api.teams它是团队的数组。要访问阵列中的第一个团队，请使用data.api.teams[0]

更改teamObj为团队。

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 })

    });

}

渲染它，团队数组将始终包含一项，因为您在请求中传递了团队的 ID。从阵列访问团队this.state.teams[0].name

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

Answer 3

试试这个

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;