Question

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

class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: [],
   .
   .
   .
currentPage: 1,
itemsPerPage: 20,
value: '',
filterTerm: null,
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).filter(this.filterData).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>
)};

我有一个输入（class =“ hotelName”），用户开始输入该内容（例如，用户类型为“ Korston”），然后单击一个按钮，新结果应只包含包含“ Korston”名称的酒店的数据。

handleInputChange(event) {
this.setState({ value: event.target.value });
}
handleSearch= () => {
 let inputval = this.state.value
 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;
}

主要问题是函数 handleSearch 过滤了我们所在页面中的数据。例如，当我们进入第3页时，过滤器将对第3页中的一系列数据进行过滤，而不是对所有页面中的全部数据进行过滤。我希望对所有数据（例如400个数据数据）进行过滤，而不是（20例如第3页中的数据数量）。有意义吗？

Answer 1

您尝试过这个吗？

您的代码：

const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
const renderHotel = currentItems.sort((a, b) => a.total - b.total).filter(this.filterData).map((item, i)

您可以做什么：

删除currentItems

const renderHotel = data.sort((a, b) => a.total - b.total).filter(this.filterData).map((item, i).slice(indexOfFirstItem, indexOfLastItem);

Answer 2

相反：

const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
    pageNumbers.push(i);
    }

您可以尝试直接生成一个数组（更快，甚至可以避免不可变性pb），在这里您将以以下状态创建pageNumbers：

   const renderPageNumbers =  new Array(data.length / itemsPerPage).slice(startIndex, endIndex).map((number, index) => {
        this.setState({ pageNumbers: [...this.state.pageNumbers, index+1]})
    ...rest of your code

通过反应过滤数据

2 个答案: