2016-03-20 15 views
0

にアクセスできません:私はにconsole.logを介してアクセスするとが反応:私はこのような私のコンポーネントの状態プロパティとして配列、持っている状態での配列のインデックス(指数未定義)

this.state = { postData: [{id: 1, author: 'Mary'}, {id:2, author: 'John'}] } 

私は、要素の内容として出力にそれをしようとすると、this.state.postData[0]など、それは、このようにオブジェクトの内容を示し、正しく

に動作します。しかし:

<p>{this.state.postData[0].author}</p> 

this.state.postData[0]は定義されていません。私は今のところ、なぜそれが起こったのかを知ることができませんでしたが、Reactの配列にアクセスする特別な方法がありますか?

EDIT:追加情報とコンテキスト状態の

初期化:

constructor() { 

    super(); 

    this.state = { postData: '', end : '' }; 

    this.loadPosts = this.loadPosts.bind(this); 

} 

私はAJAX、jQueryのを使用して、データをロードしています、これはポストの情報を含む配列の構造は次のとおりです。 (index.js)

app.get('/requestPost/12', (req, res) => { 
    var jsonPosts = { posts: [ {id:1, author: 'Mary', content: 'Hello, I am Mary'} ] }; 
    res.send(jsonPosts); 
}); 
そして

それが受信されるとpostData状態が今含ま配列。

loadPosts() { 

    $.get('/requestPost/12').success((data) => { 

     this.setState({postData : data.posts }); 

    }); 

} 

componentWillMount() { 

    this.loadPosts(); 

} 

機能をレンダリングします。私は、コンソールとしてthis.state.postData[0]を表示しても、それを要素として出力せずに表示することに気付きました。しかし、出力として使用しようとすると、<p>{this.state.postData[0].author}</p>のように、コンソールでの動作も停止します。また、それは私がコンソールにPOSTDATAのプロパティを表示しようとすると、console.log(this.state.postData[0].author)

render() { 

    console.log(this.state.postData[0]); 

    return (

    <div> 
     <h1>This is the blog we all like</h1> 
     <p>{this.state.postData[0].id}</p> 
     <p>{this.state.postData[0].author}</p> 
     <p>{this.state.postData[0].content}</p> 
     <hr/> 
    </div> 

    ); 

} 

のようにあなたは、初期状態を変更する必要がありますあなたの

答えて

4

をありがとう。あなたは空のArrayのようにpostDataを設定する必要が動作しません。 Objectとして最初の要素、あなたはpostDataから最初の要素を取得しようとしているが、それは/最初の要素としてObjectを持つことができませんしません空Stringあるのでundefinedthis.state.postData[0]戻りundefinedを取得しているため

this.state = { 
    postData: [{ }], 
    end : '' 
}; 

Example

また、あなたは、AJAX呼び出しで(render前にトリガー)componentWillMountを使用していますが、Ajaxは完成される一方、この方法では待機しません。アプリケーションのライフサイクルは、Ajaxは新しい状態で

  • 設定新しい状態
  • コールrenderを完了しましたrender
  • この

    1. コールcomponentWillMount
    2. 呼び出しのように見えます
  • 関連する問題