Получение из конечной точки API с помощью React возвращает значение undefined - PullRequest
Новая
       278

Получение из конечной точки API с помощью React возвращает значение undefined

3 голосов
/ 07 августа 2020

Я пытаюсь получить данные из этого 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

Это не должно возвращать undefined, потому что значение ключа явно там, и я считаю, что нацеливаюсь правильно.

Я пробовал вести журнал консоли, но также получил неопределенное значение. Я также попытался удалить [0] и выполнить this.state.player.people.fullName и всевозможные альтернативы, но безуспешно.

Ответы [ 3 ]

2 голосов
/ 07 августа 2020

Установите начальное состояние загрузки на true и удалите строку this.setState({loading: true}).

1 голос
/ 07 августа 2020

Есть небольшой промежуток времени, когда loading ложно, а данных еще нет в player. Попробуйте следующее 

const fullname = Object.keys(this.state.player).length ? this.state.player.people[0].fullName:""

return ( 
    <div>
        {this.state.loading ? "Loading....": fullname }
    </div> 
)
0 голосов
/ 07 августа 2020

Вы можете обнулить состояние игрока. Затем используйте эту строку.

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

Или вы также можете сделать это с помощью React Hooks, если хотите.

https://codesandbox.io/s/baseball-fetch-api-30ehh?file= / src / Приложениеjs

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [loading, setLoading] = useState(true);
  const [player, setPlayer] = useState();
  useEffect(() => {
    const fetchPeople = async () => {
      await fetch("https://statsapi.web.nhl.com/api/v1/people/8477474/")
        .then((res) => res.json())
        .then((res) => setPlayer(res))
        .then(() => setLoading(false))
        .catch((err) => setLoading(err));
    };
    fetchPeople();
  }, []);

  console.log(player);
  const fullname = player ? player.people[0].fullName : "";
  return <div className="App">{loading ? "Loading...." : fullname}</div>;
}
...