javascript - React - 当从 API 获取数据时，this.state 在 render 中为 null

Question

我试图通过制作一个简单的应用程序来学习 react ，我试图从服务器获取 json 格式的数据，然后将其呈现给 View 。问题是我收到一个错误，它说 this.state.data 为空。我该如何解决这个问题？代码:

class App extends React.Component {

  constructor() {
    super();
    //Query data
    fetch('http://localhost:8080/api?access_token=56d847accb86bddc243d4b93')
      .then(response => response.json())
      .then((data) => {
        this.setState({
          data: data
        })

      })
      .catch(err => console.error('Error ', err.toString()));

  }

  getInitialState() {
    return {
      data: {}
    };
  }

  render() {

    return (
      <h1>{this.state.data}</h1>
      );

  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

Answer 1

当使用 ES6 类作为组件时，没有调用 getInitialState 方法。
相反，在构造函数中对实际实例设置状态。

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      data: {}
    };

    fetch('http://localhost:8080/api?access_token=56d847accb86bddc243d4b93')
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .catch(err => console.error('Error ', err.toString()));

  }

  render() {
    return <h1>{this.state.data}</h1>;
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));