Reactjs與Parse.com異步加載錯誤？無法訪問對象

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 

通過使用分析查詢發現（）的承諾，我在TodoClass實例中的數據和存儲映射每個解析分貝的「行」，以及數據存儲。我看到Redux viewer正確更新。

這是我加載它，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錯誤在undefined - 這是有道理的。如果沒有待辦事項，則無法獲取第一個項目的ID - 該項目不在那裏。

你render功能可能應該檢查是否有任何待辦事項，並返回一個「裝載」 /「不待辦事項」佔位符的位置：

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