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

的变化：

1。而不是def mode(my_list): # Form a new list with the unique elements unique_list = sorted(list(set(my_list))) # Create a comprehensive dictionary with the uniques and their count appearance = {a:my_list.count(a) for a in unique_list} # Calculate max number of appearances max_app = max(appearance.values()) # Return the elements of the dictionary that appear that # of times return {k: v for k, v in appearance.items() if v == max_app}应该是this.state.filter==='show_completed'。

2。当this.state.filter==='completed'条件失败时，您需要返回null，否则会返回您在if(item.completed)条件之外返回的项目。< / p>

像这样写：

if

<强>更新

从render方法调用一个函数，并将整个映射逻辑放在：

中

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

})}

显示基于过滤器的数据 - 反应待办事项列表

1 个答案: