Карта 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?) тогда я отправлю и это!

Спасибо!

1 2

1 ответ:

Возможно, что todos не инициализируется при вызове render, или что ваш вызов Ajax не возвращает то, что вы ожидаете.

Попробуйте проверить, что todos определен перед отрисовкой

todos && todos.map...

Также проверьте, что ваш ответ Ajax является тем, что вам нужно.