Anzeigen von Daten basierend auf Filter - reagieren Todo-Liste

Question

Ich versuche, meine Todolist basierend auf dem Filter anzuzeigen, den der Benutzer wählt. im Moment habe ich den Code für die Darstellung nur ausgefüllt geschrieben. aber es funktioniert nicht.

Bitte schauen und sagen, warum es nicht funktioniert

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

Änderungen:

1. Statt this.state.filter==='show_completed' sollte this.state.filter==='completed' sein.

2. Sie müssen null zurückzukehren, wenn if(item.completed) Zustand ausfällt, sonst wird es das Einzelteil zurück, die Sie außerhalb von if Zustand zurückkehren.

schreiben es so:

{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> 

})} 

Update:

Aufruf eine Funktion von Verfahren machen und die gesamte Karte Logik im Inneren, dass setzen:

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> 
    ) 
}