我如何在 React 中使用分页搜索数据？

Question

class Employee extends Component {
  constructor() {
    super();
    this.state = {
      // employees: employees,
      employees: [],
      searchfield: "",
      currentPage: 1,
      resultsPerPage: 50,
      holder: [],
      filteredEmployees: [],
      value: "",
    };
  }

  componentDidMount = async () => {
    axios.get(`http://localhost:5000/`).then((res) => {
      const employees = res.data;         
      this.setState({
        employees: employees.recordsets[0],
        holder: employees.recordsets[0],
      });
    });
  };

  onSearchChange = (event) => {
    let { value } = event.target;
    this.setState({ value }, () => {
      var updatedList = this.state.holder;

      updatedList = updatedList.filter((employee) => {
        const fullName = employee.empFirstNm + " " + employee.empLastNm;
        return (
          fullName.toLowerCase().search(this.state.value.toLowerCase()) !== -1
        );
      });

      this.setState({ employees: updatedList });
    });
  };

  //change page
  onPaginate = (pageNumber) => {
    this.setState({ currentPage: pageNumber });
  };

  render() {
    const { employees, searchfield, currentPage, resultsPerPage } = this.state;
    const { onRouteChange } = this.props;

    //Get current employees
    const indexOfLastEmployee = currentPage * resultsPerPage;
    const indexOfFirstEmployee = indexOfLastEmployee - resultsPerPage;
    console.log("indexOfFirstEmployee: ", indexOfFirstEmployee);
    console.log("indexOfLastEmployee: ", indexOfLastEmployee);
    const filteredEmployees = employees.slice(
      indexOfFirstEmployee,
      indexOfLastEmployee
    );

    return !employees.length ? (
      <div className="tc">
        <h1>Loading</h1>
        <Spinner animation="border" variant="danger" />
      </div>
    ) : (
      <FadeIn>
        <div className="tc">
          <div
            className="
          d-flex
          justify-content-between
          flex-wrap
          flex-md-nowrap
          align-items-center
          pt-3
          pb-2
          mb-3
          border-bottom"
          >
            <h1 className="display-2">Employees</h1>
            <div
              className="tr"
              style={{
                margin: "15px 0",
              }}
            >
              <NewEmployee employees={employees} />
              <SearchBox
                searchChange={this.onSearchChange}
                value={this.state.value}
              />
            </div>
          </div>

          <Scroll>
            <CardList
              employees={filteredEmployees}
              onDelete={this.handleDelete}
              onRouteChange={onRouteChange}
            />
            <Table
              employees={filteredEmployees}
              onRouteChange={onRouteChange}
            />

            <Pagination
              resultsPerPage={resultsPerPage}
              totalResults={employees.length}
              onPaginate={this.onPaginate}
            />
          </Scroll>
        </div>
      </FadeIn>
    );
  }
}

   

I have tried implementing it with conditions of whether the results is greater than or equal to the results on a page but it did not work since it doesnt cover every single case based on the result. I am getting the search to work but when my current page is anything besides 1 is when the search doesn't work.

Any idea how I can get the filtering to work regardless of what page I am on?

Answer 1

Figured this out. I just needed to set currentPage to 1 at the end of my search:

  onSearchChange = (event) => {
    let { value } = event.target;
    this.setState({ value }, () => {
      //running this after setting the value in state because of async
      var updatedList = this.state.holder;
      updatedList = updatedList.filter((employee) => {
        const fullName = employee.empFirstNm + " " + employee.empLastNm;
        return (
          fullName.toLowerCase().search(this.state.value.toLowerCase()) !== -1
        );
      });
      this.setState({ employees: updatedList });
      this.setState({ currentPage: 1 });
    });