Question

我有那个代码，我没有得到过滤器。我想过滤所有字母“a”，但看起来SetState不起作用。我找不到错误，有人可以帮助我吗？

它看起来像是没有工作的setstate。 “a”在哪里它将是一个输入值。

我尝试创建一个搜索功能，用于呈现搜索文本输入中匹配的人的姓名。

class Pagination extends React.Component {
  constructor() {
    super();

    this.state = {
      elementsPerPage:3,
      currentPage:0,
      peoples:[
  {id:0, name:"aaa"}, 
  {id:1, name:"bb"}, 
  {id:2, name:"aa"}, 
  {id:3, name:"cc"}, 
  {id:4, name:"dada"}, 
  {id:5, name:"Daddi"}, 
  {id:6, name:"Dwe"}, 
  {id:7, name:"ta"}, 
  {id:8, name:"lala"},
  {id:9, name:"lele"}, 
  {id:10, name:"f"}, 
  {id:11, name:"a"}],
      input: "",
      filtered: [],

    };

    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.filterNames = this.filterNames.bind(this);
    this.getValueInput = this.getValueInput.bind(this);
  } 
  
    getValueInput (value) {
    this.setState({ input: value.target.value });
  }
    
    
  filterNames (){
  const {peoples, filtered} = this.state;
    console.log(this.state.filtered)
    this.filtered = this.state.filtered.filter(item => item.includes('a'))
    this.setState({filtered: this.filtered })

  } 
  

  elementsOnScreen () {
 const {elementsPerPage, currentPage, peoples} = this.state;
  const namesInFiltered = this.state.filtered = peoples.map(item => item.name)
    return namesInFiltered.map((nome) => <li>{nome}</li>)
    .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage)

  }
  
  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 });
      }

  }


  render() {
    return (
      <div>
        <input type="text" onChange={ this.getValueInput }></input>
        <button className='search' onClick={this.filterNames}> Search </button>
       <button onClick={this.previousPage}> Previous </button>
       <button onClick={this.nextPage}> Next </button>
       <ul>Names: {this.elementsOnScreen()}</ul>
      <h3>Current Page: {this.state.currentPage}</h3>
    </div>
  
    );
  }
}

ReactDOM.render(
<Pagination/>,
  document.getElementById('root')
)

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

Answer 1

让我们理清一些事情。 people实际上不是一个州，而是一个财产。此外，你在你的州创造了一些混乱，elemelts实际上不应该成为州的一部分

 function keyIncludes(key, value) {
   return el => el[key].includes(value);
 }

 function onPage(page, perPage) {
   return (_, i) => i >= (page - 1) * perPage && i < page * perPage;
 }

 class Pagination extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       elementsPerPage:3,
       currentPage:0,
       input: ""
     };
   }

  elementsOnScreen() {
    return this.props.people
       .filter(keyIncludes("name", this.state.input))
       .filter(onPage(this.state.currentPage, this.state.elementsPerPage));
  }

   render() {
     return (
        <div>
          <input type="text" onChange = {() => this.handleChange()} />
         <button onClick={() => this.previousPage()}> Previous </button>
        <button onClick={this.nextPage}> Next </button>
        <ul>Names: {this.elementsOnScreen()}</ul>
        <h3>Current Page: {this.state.currentPage}</h3>
       </div>
    );
  }

  /*...*/
 }

使用setState过滤不起作用。应对

1 个答案: