特定のレデューサー/アクションを使用した後、配列内のオブジェクトが未定義になる

Question

古典的なを使ってリストプロジェクトを実行してReduxを習得しましたが、私は奇妙な問題があります。

基本的には、チェックボックス付きのToDoリストがあり、ユーザーがチェックボックスをクリックすると、アクションが送出され、そのオブジェクトのcompletedプロパティがtrueとマークされ、コンポーネントが更新されます。

しかし...このアクションが発生すると、正常終了としてマークされるはずのオブジェクトはすべてのプロパティと共に返されますが、残りの残りのリスト（配列内の他のオブジェクト）は壊れてすべて失われますそれらのプロパティは 'undefined'に変わり、レンダリングに問題が発生します。

私は関連性があると思われるコードをすべて含めようとしましたが、私は減速機で何か間違っていると思いますが、問題を見つけることができません。

藤堂リストコンポーネント

class TodoList extends Component { 

    render(){ 
     const {todos, showCompleted, searchTerm} = this.props; 
     const renderTodos =() => { 
      if (todos.length === 0) { 
       return (
        <p className="container__message">Nothing to do.</p> 
       ); 
      } 
      return TodoAPI.filterTodos(todos, showCompleted, searchTerm).map((todo) => { 
       return (
        <Todo key={todo.id} {...todo}/> 
       ); 
      }); 
     }; 
     return (
      <div> 
       {renderTodos()} 
      </div> 
     ); 
    } 
} 
export default connect((state) => { 
    return state; 
})(TodoList); 

藤堂コンポーネント

class Todo extends Component { 

    render() { 
     const {id, text, completed, createdAt, completedAt, dispatch} = this.props; 
     const todoClass = completed 
      ? 'todo todo-completed' 
      : 'todo'; 

     const renderDate =() => { 
      let displayMessage = 'Created '; 
      let timestamp = createdAt; 

      if (completed) { 
       displayMessage = 'Completed '; 
       timestamp = completedAt; 
      } 
      return displayMessage + moment.unix(timestamp).format('MMM Do YYYY @ h:mm a'); 
     }; 

     return (
      <div className={todoClass} 
       onClick={event => dispatch(actions.toggleTodo(id)) }> 
       <input type="checkbox" checked={completed} readOnly/> 
       <div> 
        <p>{text}</p> 
        <p className="todo__subtext">{renderDate()}</p> 
       </div> 
      </div> 
     ); 
    } 
} 
export default connect()(Todo); 

アクション

export const toggleTodo = (id) => { 
    return { 
     type: 'TOGGLE_TODO', 
     id: id 
    }; 
}; 

減速

export const todosReducer = (state = [], action) => { 
    switch (action.type) { 
    case 'TOGGLE_TODO': 
     return state.map((todo) => { 
      if (todo.id === action.id) { 
       let nextCompleted = !todo.completed; 

       return { 
        ...todo, 
        completed: nextCompleted, 
        completedAt: todo.completed ? moment().unix() : 0 
       }; 
      } 
     }); 
    default: 
     return state; 
    } 
}; 

Answer 1

問題はcondition todo.id === action.idが失敗した場合、あなたがreturning何もありませんです。

return state.map((todo) => { 
    if (todo.id === action.id) { 
     let nextCompleted = !todo.completed; 

     return { 
      ...todo, 
      completed: nextCompleted, 
      completedAt: todo.completed ? moment().unix() : 0 
     }; 
    }else{ 
     return todo; 
    } 
}); 

この

チェック：説明

a=[1,2,3,4,5,6]; 
 
b = a.map (i => { if(i % 2 == 0) return i;}) 
 
console.log(b);