Javascript 如何在react应用程序中访问API的属性？

我是web开发新手，不知道如何访问API的属性。 我使用的API为我提供了足球队的信息。给出了API的模式和链接：

下面是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;

从“React”导入React；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
teamObj:{}
};
}
componentDidMount（）{
取回（“https://api-football-v1.p.rapidapi.com/v2/teams/team/33", 
{“方法”：“获取”，“标题”：
{“x-rapidapi-host”：“api-football-v1.p.rapidapi.com”，
“x-rapidapi-key”：“a35b8572b7mshe694b9e8ac66df4p158c4bjsn4518b48e8965”
}
)
.then（response=>response.json（））
.then（data=>this.setState（{teamObj:data}））
}
render（）{
返回(
我最喜欢的团队是：{this.state.teamObj.name}
);
}
}
导出默认应用程序；

从“React”导入React；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
teamObj:{}
};
}
componentDidMount（）{
取（'https://api-football-v1.p.rapidapi.com/v2/teams/team/33“，{方法：'GET'，标题：{'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；
如果（！数据）返回加载。。。；
const teamData=data.api&&data.api.teams&&data.api.teams.length>0？data.api.teams:[]；
返回(
我最喜欢的团队是：{'}
{teamData.map（（x）=>{
返回{x.name}；
})}
);
}
}
导出默认应用程序；

data

是一个对象，要访问团队数组，需要使用团队数组

data.api.teams

。要访问阵列中的第一个团队，请使用

data.api.teams[0]

将

teamObj

更改为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 })
    });
}

将其呈现为这样，团队数组将始终包含一个项，因为您在请求中传递了团队的id。使用

this.state.teams[0]。name从数组访问团队

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

我最喜欢的团队是：{this.state.teams.length&&this.state.teams[0].name}
试试这个

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;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
teamObj:null
};
}
componentDidMount（）{
取回（“https://api-football-v1.p.rapidapi.com/v2/teams/team/33", 
{“方法”：“获取”，“标题”：
{“x-rapidapi-host”：“api-football-v1.p.rapidapi.com”，
“x-rapidapi-key”：“a35b8572b7mshe694b9e8ac66df4p158c4bjsn4518b48e8965”
}
)
.then（response=>response.json（））
。然后（数据=>{
console.log（数据）
this.setState（{teamObj:data.api.teams}）
})
}
render（）{
console.log（this.state.teamObj）
返回(
我最喜欢的团队是：{
this.state.teamObj&&
this.state.teamObj[0]。名称
}
);
}
}
导出默认应用程序；
如果您使用console.log（响应），您会得到什么？
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;