如何在我的反应应用程序中访问 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 {&nbsp; &nbsp; constructor() {&nbsp; &nbsp; &nbsp; &nbsp; super();&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; teamObj: {}&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; 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' } })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((response) => response.json())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((data) => this.setState({ teamObj: data }));&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const data = this.state.teamObj;&nbsp; &nbsp; &nbsp; &nbsp; if (!data) return <div>Loading...</div>;&nbsp; &nbsp; &nbsp; &nbsp; const teamData = data.api && data.api.teams && data.api.teams.length > 0 ? data.api.teams : [];&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; My fav teams is:{' '}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {teamData.map((x) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <div>{x.name}</div>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}export default App;

Answer 2

data是一个对象，要访问你需要使用的团队数组，data.api.teams它是团队的数组。要访问阵列中的第一个团队，请使用data.api.teams[0]更改teamObj为团队。state = {&nbsp; teams: []}componentDidMount() {&nbsp; fetch("https://api-football-v1.p.rapidapi.com/v2/teams/team/33", {&nbsp; &nbsp; method: "GET",&nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; "x-rapidapi-host": "api-football-v1.p.rapidapi.com",&nbsp; &nbsp; &nbsp; "x-rapidapi-key": "a35b8572b7mshe694b9e8ac66df4p158c4bjsn4518b48e8965"&nbsp; &nbsp; }&nbsp; })&nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; this.setState({teams : data.api.teams })&nbsp; &nbsp; });}渲染它，团队数组将始终包含一项，因为您在请求中传递了团队的 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 {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; teamObj:null&nbsp; &nbsp; };&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; fetch("https://api-football-v1.p.rapidapi.com/v2/teams/team/33",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {"method": "GET","headers":&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {"x-rapidapi-host": "api-football-v1.p.rapidapi.com",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "x-rapidapi-key": "a35b8572b7mshe694b9e8ac66df4p158c4bjsn4518b48e8965"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; console.log(data)&nbsp; &nbsp; &nbsp; this.setState({teamObj : data.api.teams})&nbsp; &nbsp; })&nbsp; }&nbsp; render() {&nbsp; &nbsp; console.log(this.state.teamObj)&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h1>My fav team is: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.state.teamObj &&&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.state.teamObj[0].name&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;