作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我刚刚开始使用 ReactJS 进行编码,并且必须构建一个待办事项应用程序。现在,显示从 API 调用接收到的待办事项时出现问题。这是我得到的错误:
未捕获类型错误:无法读取未定义的属性“map”
这是代码:
TodoList.js
import React from 'react';
import $ from 'jquery';
import TodoItem from './TodoItem';
class TodoList extends React.Component {
constructor() {
super();
this.state = {
todos: [
{id: 0, title: "", completed: false}
]
};
}
componentDidMount() {
this.loadTodos();
}
loadTodos(event) {
let component = this;
$.getJSON(`https://whispering-thicket-55256.herokuapp.com/todos.json`, function(data) {
console.log(data);
component.setState({
todos: data.todos
});
});
}
renderTodos(todo, i) {
return (
<TodoItem
key={todo.id}
id={todo.id}
title={todo.title}
completed={todo.completed}
createdAt={todo.created_at}
updatedAt={todo.updated_at} />
);
}
render() {
let todos = this.state.todos
return (
<div>
<ul>
{todos.map(this.renderTodos.bind(this))}
</ul>
</div>
);
}
}
export default TodoList;
TodoItem.js
import React from 'react';
import jQuery from 'jquery';
class TodoItem extends React.Component {
componentDidMount() {
this.setState({
id: this.props.id,
title: this.props.title,
completed: this.props.completed,
createdAt: this.props.createdAt,
updatedAt: this.props.updatedAt
})
}
render() {
console.log(this.props);
return (
<li>{this.props.title}</li>
);
}
}
export default TodoItem;
我看不出我在这里做错了什么..希望有人可以帮助我。我想要实现的是在列表中显示 .json url 中的所有待办事项。如果您需要更多代码(app.js?),那么我也会发布它!
谢谢!
最佳答案
可能是调用 render 时 todos 未初始化,或者您的 Ajax 调用未返回您期望的结果。
尝试在渲染之前检查 todos 是否已定义
todos && todos.map...
还要检查您的 Ajax 响应是否符合您的需要。
关于javascript - 待办事项列表应用程序的 ReactJS 代码中未定义映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38293825/
我是一名优秀的程序员,十分优秀!