Karte undefined in ReactJS Code für Todo-Liste App

Question

Ich habe gerade mit der Programmierung in ReactJS begonnen und muss eine Todo-Anwendung erstellen. Jetzt gibt es ein Problem beim Anzeigen von Aufgaben, die von einem API-Aufruf empfangen wurden. Das ist der Fehler, den ich bekommen:

Uncaught Typeerror: kann Eigenschaft 'Karte' undefinierter

Dies ist der Code gelesen:

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

Ich kann nicht sehen, was ich hier falsch mache .. Hoffe jemand kann mir helfen. Was ich erreichen möchte, ist, alle Aufgaben aus der .json URL in einer Liste anzuzeigen. Wenn Sie mehr Code benötigen (app.js?), Dann werde ich das auch posten!

Danke!

Answer 1

Es kann sein, dass Todos nicht initialisiert wird, wenn Render aufgerufen wird, oder dass Ihr Ajax-Aufruf nicht das zurückgibt, was Sie erwarten.

versuchen, dass todos Überprüfung vor

Rendering

todos && todos.map... 

Überprüfen Sie auch definiert, dass Ihre Ajax Antwort ist, was Sie es brauchen.