Карта undefined в коде ReactJS для приложения todo list
Я только начал кодировать в ReactJS и должен построить приложение todo. Теперь есть проблема при отображении элементов задач, полученных из вызова API. Это ошибка, которую я получаю:
Uncaught TypeError: не удается прочитать свойство 'map' из undefined
Это код:
Тодолист.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 в списке.
Если вам нужно больше кода (приложение.js?) тогда я отправлю и это!
Спасибо!