未定義エラーの「username」プロパティを読み取ることができません

Question

私はAPIからデータを取得するために反応を使用しています。私のコードは次のようになります。私はレンダリング機能で（this.state.listsを）CONSOLE.LOG

var App = React.createClass({ 

getInitialState : function(){ 

    return { 
     lists: [] 
    } 
}, 

componentDidMount: function(){ 

    fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent') 
    .then(function(result){ 
     return result.json(); 
    }).then(function(jsonResult){ 
     this.setState({ 
      lists: jsonResult 
     }); 
    }.bind(this)); 
    }, 



render: function(){ 
    console.log(this.state.lists); 
    return(
     <div>{this.state.lists[0].username}</div> 

     ); 
    } 
}); 

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

と私はAPIからの全データを得たが、私は、データの一部をレンダリングするとき、私が得ました'プロパティを読み取れません'というユーザー名 'の未定義のエラーです。 getInitialState関数のリストを['']に設定し、{this.state.lists [0] .username}をレンダリングすると動作しますが、インデックスを1に変更すると同じエラーが発生します。ライフサイクル機能と関係があると思います。しかし、私はそれを理解することはできません。 APIから取得したデータは次のようになります

私はこれを3時間作業しています。誰かが私を助けてくれることを願っている。とても有難い！

Answer 1

空になります。 componentDidMount()ライフサイクルメソッドは、初期レンダリング後に呼び出されます。

render: function(){ 
    console.log(this.state.lists); 
    return(
     <div>{this.state.lists.length >0 ?this.state.lists[0].username:null}</div> 

     ); 
    } 
}); 

Answer 2

これは、this.state.listsが初めて定義されないために起こります。それはこれがrender()メソッドGETのcomponentDidMount()前に呼び出さので、何が起こっているとあなたのthis.state.listsが故にthis.state.list[0]がundefinedの助けを借りて設定するために行くことになるであろう、その時点で[]ある

初めてバイパス取得するためのコードの下 使用this.setState()this.state.listsそれまでは、最初のレンダリングのためにthis.state.listsは、任意のデータを持っていないため、エラーがある

return(
    { this.state.lists.length && <div>this.state.lists[0].username </div> } 
); 

Answer 3

問題は、データがレンダリング前にフェッチされていないためです。

componentDidMount(){ 
     fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent') 
      .then(function(result){ 
      return result.json(); 
     }).then(function(jsonResult){ 
      this.setState({ 
       lists: jsonResult 
      }); 
     }.bind(this)); 
    } 

componentWillReceiveProps(nextProps) { 
    this.renderView(); 
} 

renderView =() => { 
if (this.state.lists){ 
     return <div>{this.state.lists[0].username}</div> 
} else { return <div><p>loading</p></div> 
} 
render() { 
    return (
    {this.renderView()} 
) 
ReactDOM.render(<App />, document.getElementById('container'));