通过react

Question

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

class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: [],
.
.
.
currentPage: 1,
itemsPerPage: 20,
value: '',
startIndex : 0,
endIndex : 4,
}}}

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

有一个分页，默认情况下显示4页，然后单击下一步按钮显示其余页面。

render() {
 const { data, currentPage, itemsPerPage,startIndex,endIndex } = this.state;
 const indexOfLastItem = currentPage * itemsPerPage;
 const indexOfFirstItem = indexOfLastItem - itemsPerPage;
 const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
 const renderHotel = currentItems.sort((a, b) => a.total - b.total).map((item, i) => {
 return  <div class="item">
         <span>{item.hotelinfo.hotelsearch.realname}</span>
      </div>
});
const pageNumbers = [];
  for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
  pageNumbers.push(i);
 }

const renderPageNumbers = pageNumbers.slice(startIndex, endIndex).map(number => {
 return (
   <li className={(this.state.currentPage === number ? 'active ' : '') + 'controls'}
  key={number}
  id={number}>
  {number}
 </li>
  )});
 return (
 <div>
  <input type="text" value={this.state.value} onChange={this.handleInputChange} class="hotelName" /><span onClick={this.handleSearch} class="searchbtn">search</span>
 {renderHotel}
  <ul id="page-numbers" class="pagenumDef">
    <li onClick={this.decremant} class="nexprev"><span class="fa-backward"></span></li>
    {renderPageNumbers}
   <li onClick={this.increment} class="nexprev"><span class="fa-forward"></span></li>
  </ul>
 </div>
 )};

我有一个输入，用户开始输入该输入（例如，用户键入'Korston'），然后单击一个按钮，新结果应仅包含那些包含“ 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 });
}

handelSearch = () => {
 let inputval = this.state.value
 inputval = inputval.toLowerCase()
 .split(' ')
 .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
 .join(' ');
 let result = this.state.data.filter((item) => {
 let realname = item.hotelinfo.hotelsearch.realname
 let len = realname.length 
 if (len !== 0){
 if (realname.includes(inputval)){
   return true
 } else {
   return false
 }
 }
})
 return this.setState({data : eval(result)}, () => console.log("ITEMS : ",this.state.data) )
 };

存在三个问题： 首先：例如我们默认有100个结果。用户键入一个名称，将有20个搜索结果。对于文本搜索，将在20个结果而不是100个结果之间进行过滤。 第二个：例如，我们在第4页中。用户在第1页中搜索名称。在console.log中，我可以看到它的结果：

this.setState({data : eval(result)}, () => console.log("ITEMS : ",this.state.data) )

，但是直到用户单击分页中的数字，结果才会显示。 第三：例如，我们在第6页中。用户在以下位置搜索名称 第2页console.log中不会有任何结果。 （默认情况下，分页中有4页，单击下一步按钮将显示其余页面。） 有道理吗？