Как отобразить информацию об API в React Component? - PullRequest
Новая
       6

Как отобразить информацию об API в React Component?

0 голосов
/ 06 июня 2018

Я пытался запустить API Star Wars в своем приложении, но безрезультатно.Поэтому я начал с нуля и создал полностью пустое приложение реакции исключительно для тестирования моего API.Я установил состояние как пустой массив, затем извлек API и установил состояние, равное данным json.Запись в консоль API-данных работает нормально, и я могу видеть все отображаемые объекты, однако установка их как состояния нарушает работу.Ранее я пытался перебрать объекты, но это не сработало.

Пока у меня есть это 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(){
    super()
    this.state = {
      jedi: []
    }
  }

  componentDidMount(){
    fetch('https://swapi.co/api/people/1/?format=json').then(response => {
      return response.json()})
      .then(data => {
      // Work with JSON data here
      this.setState({jedi: data });
    }).catch(err => {
        console.log(err)
      // Do something for an error here
    });
  };

  render() {

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
        {this.state.jedi}
        </p>
      </div>
    );
  }
}

export default App;

Это ошибка: 

×
Objects are not valid as a React child (found: object with keys {name, height, mass, hair_color, skin_color, eye_color, birth_year, gender, homeworld, films, species, vehicles, starships, created, edited, url}). If you meant to render a collection of children, use an array instead.
    in p (at App.js:37)
    in div (at App.js:32)
    in App (at index.js:7)

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Проблема в том, что вы визуализируете объект как есть, вы должны использовать this.state.jedi.name или пройти через него для рендеринга.

0 голосов
/ 06 июня 2018

Вы не можете поместить объект таким образом, самый простой способ - использовать 

this.setState({jedi: JSON.stringify(data) });
...