Reactjs mit Parse.com asynchroner Ladefehler? Kann nicht auf Objekt zugreifen

Question

Ich baue eine einfache Todo-App mit React (mit Redux) und Parse. Ich habe ein ernstes Problem beim Verständnis des asynchronen Ladens eines Objekts.

Fall # 1:

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

Fall # 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 

Emphasis - todos auf dem Server besiedelten; Ich versuche nicht, auf ein leeres Array zuzugreifen, aber durch Hinzufügen des Zugriffs .id wird das Todos-Array leer.

Ich stecke fest. Ich vermute, dass sich die Ladefolge ändert, wenn ich auf "id" zugreife, aber ich weiß nicht, wie ich das beheben soll. Bitte schlagen Sie Korrekturen vor. Jede Hilfe wird sehr geschätzt.

TodoClass.js:

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

Durch die Verwendung von Parse Query() Versprechen, Landkarte ich die Daten und speichert in meiner TodoClass Instanz für jede "Reihe" von Parse db, und die Daten zu speichern. Ich sehe den Redux-Viewer korrekt aktualisiert.

Dies ist, wo ich es laden, 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

Der Grund für die erste snipped Fehler nicht aber die zweite nicht ist, löst dieser einen Fehler, wenn Sie .id zuzugreifen versuchen, auf undefined - was sinnvoll ist. Wenn dort keine Todo-Items vorhanden sind, kann die ID des ersten Items nicht gefunden werden - der Item ist nicht da.

Ihre render Funktion sollte wahrscheinlich überprüfen, ob es irgendwelche todos sind, und gibt einen „Laden“/„nein todos“ Platzhalter hier:

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