javascript - 基于过滤器显示数据 - react 待办事项列表

Question

我正在尝试根据用户选择的过滤器显示我的待办事项列表。 目前，我编写的代码仅用于显示已完成。 但它不起作用。

请查看并说明为什么它不起作用

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

变化:

1. 而不是 this.state.filter==='show_completed' 应该是 this.state.filter==='completed'.

2.当if(item.completed)条件失败时，您需要返回null，否则将返回您所在的项目返回 if 条件之外。

这样写:

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

})}

更新:

从渲染方法调用一个函数并将整个 map 逻辑放入其中:

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