フィルタベースのデータを表示するtodoリスト

Question

ユーザが選択したフィルタに基づいてtodolistを表示しようとしています。現時点では 、私は完了を示すためのコードを書いただけです。 が動作していません。

見てみると、それは

import React,{Component} from 'react'; 
import './reminderListStyles.css'; 
import Filters from './Filters'; 

class ReminderList extends Component{ 
    constructor(){ 
     super(); 
     this.state={ 
      filter:"completed" 
     } 
    this.getFilter=this.getFilter.bind(this); 
    } 


    getFilter(x){ 
     this.setState({ 
      filter:x 
     }); 
     //alert(x); 
    } 

    render(){ 



     return(
      <div> 
      <ul> 
      {this.props.reminder.map((item)=>{ 

       if(this.state.filter==='show_completed'){ 
        if( item.completed){ 
         return <li key={item.id} 
       style={{textDecoration: item.completed? 'line-through':'none'}} 
       onClick = {()=>{this.props.onToggle(item.id)}} > 
       < input type="checkbox" checked={item.completed} />{item.text}</li> 
        } 

       } 

       return <li key={item.id} 
       style={{textDecoration: item.completed? 'line-through':'none'}} 
       onClick = {()=>{this.props.onToggle(item.id)}} > 
       < input type="checkbox" checked={item.completed} />{item.text}</li> 

      })} 
      </ul> 
      <Filters reminders={this.props.reminder} 
         filterState={this.getFilter} 
      /> 
      </div> 

      ) 
    } 
} 

export default ReminderList; 

Answer 1

変更働いていない理由を教えてください：

代わりのthis.state.filter==='show_completed'

を、それは this.state.filter==='completed'する必要があります。

2.あなたはそれ以外の場合は、あなたがif条件の外に戻ってきている項目を返します、if(item.completed)条件が失敗したときにnullを返却する必要があります。

このようにそれを書く：

{this.props.reminder.map((item)=>{ 

    if(this.state.filter === 'completed'){ 
     if(item.completed){ 
      return <li key={item.id} 
         style={{textDecoration: item.completed? 'line-through':'none'}} 
         onClick = {()=>{this.props.onToggle(item.id)}} > 
          <input type="checkbox" checked={item.completed} /> 
          {item.text} 
        </li> 
     } 
     return null  //here 
    } 

    return <li key={item.id} 
       style={{textDecoration: item.completed? 'line-through':'none'}} 
       onClick = {()=>{this.props.onToggle(item.id)}} > 
        <input type="checkbox" checked={item.completed}/> 
        {item.text} 
      </li> 

})} 

更新：

メソッドをレンダリングし、その内部でマップ全体のロジックを入れてから関数を呼び出します。

renderTodos(){ 

    return this.props.reminder.map((item)=>{ 
     if(this.state.filter === 'completed'){ 
      if(item.completed){ 
       return <li key={item.id} 
          style={{textDecoration: item.completed? 'line-through':'none'}} 
          onClick = {()=>{this.props.onToggle(item.id)}} > 
           <input type="checkbox" checked={item.completed} /> 
           {item.text} 
         </li> 
      } 
      else null; 
     } 

     return <li key={item.id} 
        style={{textDecoration: item.completed? 'line-through':'none'}} 
        onClick = {()=>{this.props.onToggle(item.id)}} > 
         <input type="checkbox" checked={item.completed}/> 
         {item.text} 
       </li> 

    })} 
} 

render(){ 
    return(
     <div> 
      <ul> 
       {this.renderTodos()} 
      </ul> 
      <Filters 
       reminders={this.props.reminder} 
       filterState={this.getFilter} 
      /> 
     </div> 
    ) 
}