ReactJS 코드에서 TODO 목록 앱에 대해 정의되지 않은 맵

방금 ReactJS에서 코딩을 시작했으며 todo 애플리케이션을 빌드해야합니다. 이제 API 호출에서받은 할일 항목을 표시 할 때 문제가 있습니다. 이것은 내가 오류 얻을 수있다 :ReactJS 코드에서 TODO 목록 앱에 대해 정의되지 않은 맵

catch되지 않은 형식 오류 : 정의되지 않은

의 속성을 읽을 수 없습니다 '지도'를이 코드입니다 :

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?)가 필요하면 그 코드도 게시 할 것입니다.

감사합니다.

출처

2016-07-10 Rachel Romée

렌더가 호출 될 때 todos가 초기화되지 않았거나 Ajax 호출이 예상 한 것을 반환하지 않을 수 있습니다. 그 일하러를 확인

시도 또한 Ajax 응답은 당신은 그것을 필요 무엇인지 확인

todos && todos.map...

을 렌더링하기 전에 정의된다.

출처

2016-07-10 16:11:03

ReactJS 코드에서 TODO 목록 앱에 대해 정의되지 않은 맵

답변

관련 문제