TypeErrorが存在する理由：未定義の 'completed'プロパティを読み取ることができませんか？

Question

私はtodo reactjsアプリのレデューサーを開発しました。これは減速機の一部です：

case "SHOWCOMPLETE": 
      //todo remove 
      debugger; 
      return state.map(todo => { 
       if (todo.completed) { 
        return todo 
       } 
       else 
       {} 
      }) 

これは完了したtodosを表示するためです：真です。しかし、todosコンポーネントはこれをエラーでレンダリングします。これはコンポーネントの一部です：

if (this.props.todos) { 
      //todo remove 
      console.log('testing=this.props', this.props); 
      display = this.props.todos.map 
      (
        (todo) => (

         <p className={todo.completed ? 'strikethrough' : ''} 
          onClick={() => this.complete(todo.name)}> {todo.name}!</p> 
        ) 

      ) 
     } 

なぜこのエラーが発生しますか？ここにgithubのリンクがあります：github

Answer 1

実際に何をしたいのですか？mapではなく、filterです。あなたはmap使用する場合は、あなたが得る：

let a = [1,2,3].map(n=> {if (n !== 2) return n}) 
 

 
console.log('a = ', a); //result = [1, undefined, 3];

とfilterはあなたを与える：

let a = [1,2,3].filter(n=> (n !== 2)); 
 

 
console.log('a = ', a); //result = [1, 3]

undefinedmapを使用しては次のように渡されたときに取得しますtodoを実行し、todo.completedにアクセスすると投げます。

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter?v=example
• https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=example

：

はで詳細を参照してください。