如何使用React创建过滤器？

Question

我是React的学徒，我正在学习练习但是我有问题，我确实想为我的应用程序创建一个过滤器。

我有那段代码：

class Pagination extends React.Component {
  constructor() {
    super();

    this.state = {
      elementsPerPage:3,
      currentPage:0,
      peoples:[
  {id:0, name:"jee"}, 
  {id:1, name:"jiii"}, 
  {id:2, name:"jaa"}, 
  {id:3, name:"joo"}, 
  {id:4, name:"daaa"}, 
  {id:5, name:"hehee"}, 
  {id:6, name:"hoho"}, 
  {id:7, name:"ihihi"}, 
  {id:8, name:"huheue"},
  {id:9, name:"haha"}, 
  {id:10, name:"brbr"}, 
  {id:11, name:"ususauasaua"}]
    };

    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.searchItem = this.searchItem.bind(this);

  }
 

/*  elementsOnScreen () {
 const currentState = this.state;
 return this.state.numbers
  .slice(this.state.currentPage*this.state.elementsPerPage, this.state.currentPage*this.state.elementsPerPage + this.state.elementsPerPage)
  .map(number => (<li>{number}</li>));
}  
 */ 
  
    
  elementsOnScreen () {
 const {elementsPerPage, currentPage, peoples} = this.state;
  
    
 return peoples
  .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage)
  .map((peoples)=><li>{peoples.name}</li>);
       
       
} 
  
  nextPage () {
     const {elementsPerPage, currentPage, peoples} = this.state;
    
if((currentPage+1) * elementsPerPage < peoples.length){
  this.setState({ currentPage: this.state.currentPage + 1 });
    console.log(this.state.currentPage)  
}
  }
  
    previousPage () {
      const { currentPage } = this.state;
      if(currentPage - 1 >= 0){
         this.setState({ currentPage: this.state.currentPage - 1 });
      }

  }

  searchItem (){
 
    console.log(this.state.elementsPerPage)
  }

  
  render() {
    return (
      <div>
        <input></input>
        <button onClick={this.searchItem}> Search </button>
       <button onClick={this.previousPage}> Previous </button>
       <button onClick={this.nextPage}> Next </button>
       <h1>Names: {this.elementsOnScreen()} </h1>
      <h1>Current Page: {this.state.currentPage}</h1>
      
        </div>
  
    );
  }
}

ReactDOM.render(
<Pagination/>,
  document.getElementById('root')
)

<div id="root"></div>

过滤器的想法是：过滤是否有某些单词或字母等于输入的类型。

示例： 我输入字母“a”，返回单词：

1. “jaa”，
2. “daaa”，
3. “哈哈”和
4. “ususauasaua”。

有人可以帮助我吗？

Answer 1

您需要使用.filter()才能获取包含该特定字母的对象数组（在您的情况下为“a”），所以：

peoples.filter(item => item.name.includes("a"))

这会让你回复：

peoples:[
  {id:2, name:"jaa"}, 
  {id:4, name:"daaa"}, 
  {id:9, name:"haha"}, 
  {id:11, name:"ususauasaua"}];

然后你可以在返回的数组上链接.map()并获取name属性：

peoples.filter(item => item.name.includes("a")).map(item => item.name);

这将返回一个只是名字的数组：

["jaa", "daaa", "haha", "ususauasaua"]

在elementsOnScreen函数中

elementsOnScreen () {
 const { peoples} = this.state;
  return (
    <div> { peoples.filter(item => item.name.includes("a")).map(item => 
    (<li> {item.name}</li>))} 
    </div>
 )
}

现在你会得到：

  

警告：数组或迭代器中的每个子节点都应该有一个唯一的“键”支柱。

为避免这种情况，请确保在.map()内为<li>

提供唯一的键值

.map(item => (<li key= {item.id}> {item.name}</li>));