我正在使用 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);
最佳答案
第一个片段没有出错但第二个片段却出错的原因是,当您尝试访问 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>
}
关于javascript - Reactjs 与 Parse.com 异步加载错误?无法访问对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38118600/