當從API獲取數據時，React - this.state爲空內部呈現

Question

我試圖通過製作一個簡單的應用程序來學習反應，其中我試圖從服務器獲取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')); 

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'));