Question

我有一系列数据，这些数据在一个数组（json文件）中包含一些对象，它将由react显示。

classname

我有一个输入，用户开始输入该输入（例如，用户键入'Korston'），然后单击一个按钮，新结果应仅包含那些包含“ Korston”名称的酒店的数据。

  [{'id': '5c0b6cd9e1382352759fbc25', 'hotelinfo': {'hotelsearch': {'realname': 'Korston Hotel Moscow'}},{'id': '5c0b6cd9e1382352759fbc24', 'hotelinfo': {'hotelsearch': {'realname': 'Lavanta Hotel'}},{'id': '5c0b6cd9e1382352759fbc28', 'hotelinfo': {'hotelsearch': {'realname': 'Stanpoli Hotel'}}]


class App extends React.Component {
 constructor(props){
 super(props);
  this.state = {
   data: [],
   filterTerm: null,
       .
       .
       .
    }
   render() { 
    const { data, currentPage, itemsPerPage } = this.state; 
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage; 
    const currentItems = data.slice(indexOfFirstItem, indexOfLastItem); 
    const renderData= currentItems
    .sort((a, b) => a.total - b.total)
    .filter(this.filterData)
    .map((item, i) => { return <div class="item">{item.realname}</div>
     })} 
 }}

我正在为这些物品翻页。当我搜索（例如“ Korston”）并且只有一个结果时，分页数没有更改，分页也不会更新。

<div><input type="text" value={this.state.value} onChange={this.handleInputChange} /><span onClick={this.handelSearch}>search</span></div>

handleInputChange(event) {
this.setState({ value: event.target.value });
}

handleSearch= () => {
 const {value} = this.state;
 this.setState({filterTerm: value});
}

filterData = (item) => {
 const { filterTerm: term } = this.state;
 if (term === null) {
  return true;
}
let inputval = this.state.value
 inputval = term.toLowerCase()
 .split(' ')
 .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
 .join(' ');

let realname = item.hotelinfo.hotelsearch.realname
let len = realname.length
 if (len !== 0) {
  if (realname.includes(inputval)) {
  return true
} else {
  return false
 }
 }
return false;
}

renderPageNumbers是我的分页，并且在过滤数据之后，分页中的页数没有更改。

在响应中过滤数据后如何更新分页

0 个答案: