Javascript 如何在React组件上显示API信息？

我一直在尝试在我的应用程序上运行星球大战API，但没有成功。所以我从头开始，创建了一个完全空的react应用程序，只用于测试我的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;

---

你们不能这样放置对象，最简单的方法就是使用

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

---

问题是，如果要按原样渲染对象，则应使用this.state.jedi.name或循环渲染对象。

不能按原样放置

{this.state.jedi}

。您需要在渲染中循环，因为它是一个数组。还要验证API结果中的

数据是否为数组。您应该循环使用jedi并返回有效的HTML。像这样。state.jedi.map（（val）=>任何东西
）
this.setState({jedi: JSON.stringify(data) });