javascript - 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

通过使用 Parse Query find() Promise，我将数据映射并存储在 Parse 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

第一个片段没有出错但第二个片段却出错的原因是，当您尝试访问 undefined 上的 .id 时，后者会引发错误 - 这说得通。如果那里没有待办事项，您将无法获取第一个项目的 id — 该项目不在那里。

您的 render 函数可能应该检查是否有任何待办事项，并在此处返回“正在加载”/“无待办事项”占位符:

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