使用 React 从 API 端点获取返回值未定义

Question

我正在尝试从此 NHL API 获取数据：https ://statsapi.web.nhl.com/api/v1/people/8477474/

当我将调用输出到我的页面时，它返回 undefined 并且我无法让它显示该值。奇怪的是，对象中的第一个元素正确显示，但没有任何嵌套元素。

这是我的代码

import React, {Component} from "react"

class App extends Component {

constructor() {

    super()

    this.state = {

      loading: false,

      player: {}

    }

} 

componentDidMount() {

  this.setState({loading: true})

  fetch("https://statsapi.web.nhl.com/api/v1/people/8477474/")

    .then(response => response.json())

    .then(data => {

         this.setState({

           loading: false,

            player: data

         })

}) 

}

render() { 

  const fullname = this.state.loading ? "Loading..." : this.state.player.people[0].fullName; 

  return ( 

        <div>

            {fullname }

        </div> 

    )

}

}

export default App

这不应该返回未定义的，因为关键值显然在那里，我相信我的目标是正确的。

我尝试了控制台日志记录，但我也未定义。我也尝试删除 [0] 并执行 this.state.player.people.fullName 和各种替代方法，但没有成功。

Answer 1

将加载的初始状态设置为true，并删除行this.setState({loading: true})。

Answer 2

有一小段时间loading是假的，数据还player没有。尝试以下const fullname = Object.keys(this.state.player).length ? this.state.player.people[0].fullName:""return (&nbsp;&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.loading ? "Loading....": fullname }&nbsp; &nbsp; </div>&nbsp;)

Answer 3

您可以将播放器状态初始化为 null。然后使用这一行。&nbsp;const fullname = this.state.player ? this.state.player.people[0].fullName:""或者，如果您愿意，也可以使用 React Hooks 来做到这一点。https://codesandbox.io/s/baseball-fetch-api-30ehh?file=/src/App.jsimport React, { useState, useEffect } from "react";import "./styles.css";export default function App() {&nbsp; const [loading, setLoading] = useState(true);&nbsp; const [player, setPlayer] = useState();&nbsp; useEffect(() => {&nbsp; &nbsp; const fetchPeople = async () => {&nbsp; &nbsp; &nbsp; await fetch("https://statsapi.web.nhl.com/api/v1/people/8477474/")&nbsp; &nbsp; &nbsp; &nbsp; .then((res) => res.json())&nbsp; &nbsp; &nbsp; &nbsp; .then((res) => setPlayer(res))&nbsp; &nbsp; &nbsp; &nbsp; .then(() => setLoading(false))&nbsp; &nbsp; &nbsp; &nbsp; .catch((err) => setLoading(err));&nbsp; &nbsp; };&nbsp; &nbsp; fetchPeople();&nbsp; }, []);&nbsp; console.log(player);&nbsp; const fullname = player ? player.people[0].fullName : "";&nbsp; return <div className="App">{loading ? "Loading...." : fullname}</div>;}