ReactでAPIレスポンスからデータをレンダリングする方法は？

Question

APIから変数への応答を初期化する方法を教えてください。render()関数で使用できますか？なぜcomponent.setStateが機能しないのですか？ エラー：
キャッチされない例外TypeError：未定義のプロパティを読み取ることができません 'ユーザ名'（...）

class Main extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     data: 23 
    }; 
} 

    componentDidMount() { 
var component = this; 


     fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime') 
      .then(function(response) { 
       return response.json() 
      }).then(function(json) { 
       var data = json; 
       console.log(data[0]); 
       console.log(data[0].username); 
       component.setState({ 
        data: json 
       }) 
      }) 

    } 




    render() { 
    return (
     <div> 
     <h1>elo{this.state.data[0].username}</h1> 


     </div> 
    ); 
    } 
} 

const docs = document.getElementById('root'); 

ReactDOM.render(<Main/> , docs); 

Answer 1

理由は、まず、この "this.state.data [0] .username" をレンダリングするにはいないということです応答がAPI呼び出しから戻ってくるまで、設定します。あなたのrenderメソッドでは、このような

何か作業をする必要があります：あなたが後で到着するいくつかのデータを使用する予定の場合は

render() { 
    var someData = this.state.data[0].username || ""; 
    return (
     <div> 
     <h1>elo{someData}</h1> 


     </div> 
    ); 
    }