React - 从 API 获取数据时，渲染内部的 this.state 为 null答案

【问题标题】：React - this.state is null inside render when getting data from APIReact - 从 API 获取数据时，渲染内部的 this.state 为 null
【发布时间】：2016-06-20 10:15:52
【问题描述】：

我试图通过制作一个简单的应用程序来学习反应，我试图从服务器获取 json 格式的数据，然后将其呈现到视图中。问题是我收到一个错误，它说 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'));

【问题讨论】：

标签： javascript reactjs

【解决方案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'));

【讨论】：

FWIW React 团队建议在 ComponentDidMount: facebook.github.io/react/tips/initial-ajax.html 中进行 AJAX 调用。
@RickRunyon 你能给我们指点解释为什么我们不应该在componentWillMount 中获取数据的文章吗？我对此非常好奇。谢谢
我并不是说你不应该这样做，而是将 React 团队所倡导的最佳实践传达给我们。最好的解释似乎是componentDidMount 适用于所有副作用代码（AJAX/DOM 操作/附加事件）。 SO上有一篇关于它的旧帖子here。
我遇到了同样的问题，但这对我不起作用