React API call is not working as intended with setState()

Question

So here I'm fetching records by page. At mounting, I fetched page 1 and on next and prev button I'm changing the count, which is changing the page number and making a get request. But my code is not working correctly. It is giving me the result of count's previous state.

App.js

class App extends React.Component {


constructor(props) {
    super(props);
    this.state = {
      data: {},
      count: 1,
    };
  }



 handleApi = () => {
    fetch(`http://localhost:9000/accounts?page=${this.state.count}`)
      .then((res) => res.json())
      .then((res) => {
        this.setState({ data: res });
      })
      .catch((err) => console.log(err));
  };

  handlePrev = () => {
    if (this.state.count > 1) {
             this.setState((prevState) => ({
         count: prevState.count - 1
      }))
      this.handleApi();
    }
  };



handleNext = () => {
    if (this.state.count < this.state.data.total) {
      this.setState((prevState) => ({
         count: prevState.count + 1
      }))
      this.handleApi();
    }
  };

  componentDidMount() {
    this.handleApi();
  }

  render() {
    return (
      <div className="App container">
        <h1 className="mb-3 text-center">Pagination Homepage</h1>

        {Object.keys(this.state.data).length !== 0 ? (
          <ListData detail={this.state.data} />
        ) : (
          <h4 className="mb-5 text-center">No Data to Show.</h4>
        )}

        <nav aria-label="Page navigation example">
          <ul className="pagination justify-content-center mt-4">
            <li className="page-item">
              <button
                className="btn btn-outline-primary me-3"
                onClick={this.handlePrev}
              >
                Prev
              </button>
            </li>

            <li className="page-item">
              <button
                className="btn btn-outline-success"
                onClick={this.handleNext}
              >
                Next
              </button>
            </li>
          </ul>
        </nav>
      </div>
    );
  }
}

export default App;

ListData.js

export default class ListData extends Component {
  render() {
    return (
      <div className="list-outer">

        <h4 className="mb-3 text-center"> List Data</h4>
        <div className="list-head">
          <p>Name</p>
          <p>E-mail</p>
        </div>
        {this.props.detail.data &&
          this.props.detail.data.map((list, index) => (
            <div key={list._id} className="list">
             
              <p className="list-item">{list.name.toUpperCase()} </p>
              <p className="list-item"> {list.mail}</p>
            </div>
          ))}
      </div>
    );
  }
}

Console

After updating the count the API is still calling count's previous state. Here page number in Data should be equal to the count.

Answer 1

Since setState works in an asynchronous way, after calling setState the this.state variable is not immediately changed. So if you want to perform an action immediately after setting state on a state variable and then return a result, use a callback:

  handlePrev = () => {
    if (this.state.count > 1) {
             this.setState((prevState) => ({
         count: prevState.count - 1
      }), () => this.handleApi());
    }
  };



handleNext = () => {
    if (this.state.count < this.state.data.total) {
      this.setState((prevState) => ({
         count: prevState.count + 1
      }), () => this.handleApi());
    }
  };