javascript - 在 react 中过滤数据？

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;
}

主要问题是每次我只过滤当前页面，这意味着我过滤分页结果。我应该先过滤列表，然后对过滤后的列表进行分页，但我该怎么做呢？

Answer 1

这里有一些见解。

您可以尝试先通过searchTerm 进行过滤，然后再根据分页目的进行转换。

我在这里为您创建了一个小演示 https://codesandbox.io/s/xl66vov1o4