React.js：render（）関数内のオブジェクトの配列内のプロパティを取得できません

Question

レンダリング関数でオブジェクトの配列のプロパティを取得する方法私はこのしよう：私は配列

console.log(this.state.items[0]) 

の最初の要素だけをログアウトした場合、それはプリントアウトし、しかし

class App extends React.Component { 
    constructor() { 
    super() 

    this.state = { 
     items: [] 
    } 
    } 
    componentWillMount() { 
    fetch('http://swapi.co/api/people/?format=json') 
     .then((response) => response.json()) 
     .then(({ results: items }) => this.setState({ items })) 
    } 

    filter(e){ 
    this.setState({ filter: e.target.value }) 
    console.log(this.state.items[0].name); 
    } 

    render() { 
    console.log(this.state.items[0].name); 
    return (
     <div> 
     <input type="text" onChange={this.filter.bind(this)} /> 
     </div> 
    ) 
    } 

} 
export default App 

：

render() { 
    console.log(this.state.items[0].name); 
(...) 

を私はエラーを得ましたオブジェクト

Object { name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", eye_color: "blue", birth_year: "19BBY", gender: "male", homeworld: " http://swapi.co/api/planets/1/ ", films: Array[5], 6 more… }

フィルタ機能をクビにすると

は、私が最初の要素 にconsole.logのプロパティを取得行う（this.state.items [0] .nameの）

プリントアウト：

Luke Skywalker

何が起こっていますここに？

Answer 1

state.items配列は、フェッチが完了するまで設定されません。レンダリングメソッドはこれより前に呼び出されるため、期待どおりに動作しません。

コンソールの出力を再確認すると、オブジェクトが表示される前にいくつかのヌルが表示されるか、または未定義と感じられます。

render() { 
    console.log(this.state.items.length > 0 ? this.state.items[0].name : 'Items not loaded yet'); 
    return (
     <div> 
     <input type="text" onChange={this.filter.bind(this)} /> 
     </div> 
    ) 
    } 

Answer 2

fetchが非同期呼び出しですので、初めてthis.state.items意志[]レンダリングし、あなたが存在しない0番目の項目のnameにアクセスしようとしている時に、それがエラーを投げている：

これを試してみてくださいそのための。

使用している：

console.log(this.state.items); 

は、2つの値の1 []を印刷して、別の1は、サーバーから取得されたデータになりますコンソールをチェックしてください。

ソリューション：

あなたが応答を得れば、それは適切な名前を表示しますレンダリング内側長さにチェックを入れてください。このよう

：

render(){ 
    if(this.state.items.length) 
     console.log(this.state.items[0].name); 

    return(
     .... 
    ) 
}