ReactJS 分页帮助按钮无法正常工作

Question

我正在创建一个表格应用程序组件，该组件从 API (https://retoolapi.dev/HKpCV2/data) 获取数据，其中 25 项数据分为 3 页（每页限制 10 项）。虽然第一页的数据正确呈现，但我无法使用为按钮 first、previous、next 和 last 创建的功能导航到其他页面。所有按钮都不起作用，我无法解决此问题。下面显示了代码中每个部分的详细分解：

this.state & componentDidMount 到 Fetch API

  constructor(props){
    super(props);
    this.state = {
      err: null,
      isLoaded: false,
      users: [],
      curr_page: 1,
      per_page: null,
      total: 0
    }
  }

  componentDidMount(){
    const { curr_page } = this.state;
    fetch(`https://retoolapi.dev/HKpCV2/data?_page=${curr_page}`)
      .then(
        (res) => {
        if(res.ok) {
          if(res.status >= 400){
            throw new Error("Server responds with error!")
          }
          return res.json();
        }
      })
      .then(
        (data) => {
          this.setState({
            ...this.state,
            users: data,
            isLoaded: true
          });
        },
        (err) => {
          this.setState({
            isLoaded: true,
            err
          });
        }
      );
  }

按钮功能

  goToFirstPage = (e) => {
    e.preventDefault()
    this.setState({
      ...this.state,
      curr_page: 1
    })
  }

  goToPrevPage = () => {
    this.setState({
      ...this.state,
      curr_page: this.state.curr_page - 1
    })
  }

  goToNextPage = () => {
    this.setState({
      ...this.state,
      curr_page: this.state.curr_page - 1
    })   
  }

  goToLastPage = () => {
    this.setState({
      ...this.state,
      curr_page: null //replace with total number of pages
    }) 
  }

Main.js

render(){
    const { users, isLoaded } = this.state;

    const renderData = users.map((user) => {
      return(
        <tbody key={user.id}>
          <td>{user.id}</td>
          <td>{user.firstName}</td>
          <td>{user.lastName}</td>
        </tbody>
      )
    })

    if(!isLoaded){
      return(
        <p>Loading...</p>
      )
    }
    return(
      <div>
        <table>
          <thead>
            <th>S/N</th>
            <th>FN</th>
            <th>LN</th>
          </thead>
          {renderData}
        </table>
        <div>
          <button onClick={this.goToFirstPage}>&lt;&lt;</button>
          <button onClick={this.goToPrevPage}>&lt;</button>
          <button onClick={this.goToNextPage}>&gt;</button>
          <button onCLick={this.goToLastPage}>&gt;&gt;</button>
        </div>
      </div>
    )
  }

Answer 1

您只获取componentDidMount。您需要随时获取状态更改，可以使用componentDidUpdate 方法检测到。

为了保持代码 DRY，由于初始渲染不调用 componentDidUpdate，因此将网络请求抽象为一个单独的函数，可以在该函数和 componentDidMount 中调用。

getData = () => {
  const { curr_page } = this.state;
  fetch(`https://retoolapi.dev/HKpCV2/data?_page=${curr_page}`)
    // etc
}
componentDidMount() {
  this.getData();
}
componentDidUpdate(_, prevState) {
  if (prevState.curr_page !== this.state.curr_page) {
    this.setState({
      isLoaded: false
    });
    this.getData();
  }
}

正如你已经注意到的，你也应该改变

  goToNextPage = () => {
    this.setState({
      ...this.state,
      curr_page: this.state.curr_page - 1

到

  goToNextPage = () => {
    this.setState({
      ...this.state,
      curr_page: this.state.curr_page + 1