Не могу получить список JSON ReactJS из выборки

Question

Привет, ребята. Я использую API-интерфейс Star Wars для экспериментов в ReactJS.

Я хочу получить коллекцию людей в виде:

{
    "count": 87,
    "next": "https://swapi.co/api/people/?page=2",
    "previous": null,
    "results": [
        {
            "name": "Luke Skywalker",
            "height": "172",
            "mass": "77",
            "hair_color": "blond",
            "skin_color": "fair",
            "eye_color": "blue", ... (continues)

Поскольку я могуполучить один символ. Я знаю, что механизм получения работает, но мне не удается получить список символов в результатах.

Мое приложение выглядит так:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Character from './Character'
class App extends Component {
  constructor() {
    super()
    this.state = {
      people : {},
      character: {}
    }
    fetch("https://swapi.co/api/people/1")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    character: data
                })
            })

    fetch("https://swapi.co/api/people/")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    people: data
                })
            })
    console.log(this.state.people)
    console.log(this.state.people.results)
  }
  render() {
    return (
      <div className="App">
        <Character
          character = { this.state.character}
        />
      </div>
    );
  }
}

export default App;

Яполучение этой информации из файла console.log (остальное для единственного символа, который работает нормально).

Первый файл console.log дает мне (в веб-консоли firefox)

Объект {}

Второй дает мне неопределенное значение.

Я экспериментировал с кучей вещей и, похоже, не могу найти, как получить этот список символов ... что яЯ пропал?

Answer 1

Вы должны использовать это как возможность использовать React-хуки.Это будущее ?

const App = () => {
    // equivalent to the state object in your constructor
    const [people, setPeople] = React.useState({});
    const [character, setCharacter] = React.useState({});

    // as second argument is an empty array it is
    // the equivalent of componentDidMount
    React.useEffect(() => {
       fetch("https://swapi.co/api/people/1")
         .then(response => response.json())
         .then(data => {
             setCharacter(data);
          }
        )

        fetch("https://swapi.co/api/people/")
          .then(response => response.json())
          .then(data => {
            setPeople(data);
          }
        )
    }, []);

    return (
      <div className="App">
        <Character character={character} />
      </div>
    )
}

Answer 2

1) Вы должны переместить вызовы в метод жизненного цикла componentDidMount

2) Метод setState является асинхронным, поэтому регистрация значения может не дать правильное значение в данный момент.Чтобы получить правильное значение свойства, используйте второй аргумент (функцию), который будет вызываться после обновления состояния.

class App extends Component {
  constructor() {
    super()
    this.state = {
      people : [], // it should an array
      character: {}
    }
  }

  componentDidMount() {
    fetch("https://swapi.co/api/people/1")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    character: data
                }, () => console.log(this.state.character))

            })

    fetch("https://swapi.co/api/people/")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    people: data.results
                }, () => console.log(this.state.people.results))

            })

  }

  render() {
    return (
      <div className="App">
        <Character
          character = { this.state.character}
        />
      </div>
    );
  }
}

export default App;