Parse.com非同期読み込みエラーのReactjs？オブジェクトにアクセスできない

Question

React（Redux付き）とParseを使って簡単なTodoアプリケーションを構築しています。私はオブジェクトの非同期読み込みを理解することに重大な問題があります。

ケース＃1：

var todos = this.props.todos; 
    console.log(todos) // I see [{TodoClass} {TodoClass}] 
    console.log(todos[0]) // I see {id: "xyz123", content: "hello world"} 

ケース＃2：

var todos = this.props.todos; 
    console.log(todos) // I see [] 
    console.log(todos[0]) // undefined 
    console.log(todos[0].id) // error; can't access id 

強調 - サーバ上のドスは人口です。私は空の配列にアクセスしようとしていませんが、アクセス.idを追加することで、todos配列が空になります。

私は立ち往生しています。私は "id"にアクセスしようとするとロードの変化のシーケンスが疑わしいですが、それを修正する方法はわかりません。修正を提案してください。どんな助けでも大歓迎です。

TodoClass.js：

function TodoClass(id, content) { 
    this.id = id; 
    this.content = content; 
} 
export default TodoClass 

解析クエリ（）約束を見つける使用することにより、私は解析DBの各「行」、およびストアへのデータのための私のTodoClassインスタンス内のデータとストアをマップ。私はReduxビューアが正しく更新されるのを見る。

これは、私はそれをロードする場所TodoList.jsxです：最初のスニップはエラーではなく、二番目があるん

var TodoList = React.createClass({  
    render: function() { 
     var todos = this.props.todos; <-- Array of TodoClass instances 
     var renderData =() => { 
      console.log(todos) 
      console.log(todos[0]) 
      //console.log(todos[0].id) <-- Gives me issues. 
      var elements = []; 
      for (var i = 1; i< 5; i++) { 
       elements.push(<BrowseItem key={i} todo={todos[i]}/>) 
      };  
      return elements; 
     }; 
     return (
      <div > {renderData()} </div> 
     ); 
    } 
});   
export default connect((state) => {return state})(TodoList); 

Answer 1

理由、後者は、あなたが.idにアクセスしようとしているエラーが発生しますon undefined - これは意味があります。 ToDo項目がない場合は、最初の項目のIDを取得できません。項目はそこにありません。

render: function() { 
    var todos = this.props.todos; 
    if (todos.length === 0) { 
    return <div>No todos.</div>; 
    } 
    console.log(...); 
    ... 
    return <div>{renderData()}</div> 
}