Reactjs 如何在React中使用分页搜索数据？ class雇员扩展组件{ 构造函数（）{ 超级（）； 此.state={ //员工:员工,， 员工：[]， 搜索字段：“”， 当前页面：1， 结果每页50页， 持有人：[]， 筛选员工：[]， 值：“”， }; } componentDidMount=async（）=>{ axios.get(`http://localhost:5000/`)。然后（（res）=>{ const employees=资源数据； 这是我的国家({ 员工：员工.记录集[0]， 持有者：employees.Recordset[0]， }); }); }; onSearchChange=（事件）=>{ 让{value}=event.target； this.setState（{value}，（）=>{ var updatedList=this.state.holder； updatedList=updatedList.filter（（员工）=>{ const fullName=employee.empFirstNm+“”+employee.employee-stnm； 返回( fullName.toLowerCase（）.search（this.state.value.toLowerCase（））！=-1 ); }); this.setState（{employees:updatedList}）； }); }; //换页 onPaginate=（页码）=>{ this.setState（{currentPage:pageNumber}）； }; render（）{ const{employees，searchfield，currentPage，resultsPerPage}=this.state； const{onRouteChange}=this.props； //获取现有员工 const indexOfLastEmployee=currentPage*resultsPerPage； const indexOfFirstEmployee=indexOfLastEmployee-resultsPerPage； log（“IndexOffirsTemploye:”，IndexOffirsTemploye）； 日志（“indexOfLastEmployee:，indexOfLastEmployee”）； const filteredEmployees=employees.slice( indexOfFirstEmployee， 指数雇员 ); 返回！长度( 加载 ) : ( 员工 ); } }

我已经尝试过实施它，条件是结果是否令人满意 大于或等于页面上的结果，但它没有 工作，因为它不包括基于结果的每一个案例。 我正在让搜索工作，但当我的当前页面是除1以外的任何内容时，搜索不工作

你知道我怎样才能让过滤工作，不管我在哪一页 我在吗

---

我明白了。我只需要在搜索结束时将currentPage设置为1：

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

   

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