时间戳

首页 > 解决方案 > 在前一行我正在做 setCurrentPage(value)，在下一行：console.log(CurrentPage, value)，CurrentPage 和 value 是不同的。为什么？

reactjs - 在前一行我正在做 setCurrentPage(value)，在下一行：console.log(CurrentPage, value)，CurrentPage 和 value 是不同的。为什么？

问题描述

我有这段代码，其中包含 my 的值currentPage：

const [currentPage, setCurrentPage] = useState(0);

当我单击按钮时会触发此功能。

function logsPagination(page) {
 setCurrentPage(page);
 console.log("currentPage " + currentPage + " page" + page);

 //currentPage 1 page0
 //currentPage 0 page-1
 //currentPage -1 page0
 //currentPage 0 page13

}

为什么 currentPage 和 中的参数page不同console.logs？永远不是相同的值。尽管理论上它们应该具有相同的值，尽管我理解这可能是由于 is时正在useState完成。componentrendered

console.log更新后我该怎么做setCurrentPage？例如：

//currentPage 1 page1 //currentPage 0 page0 //currentPage -1 page-1

这是我的实时代码：

https://codesandbox.io/s/late-meadow-ns6g6?file=/src/App.js:117-131

import React, { useState, useEffect, useRef } from "react";

export default function Table() {
  const [currentPage, setCurrentPage] = useState(0);
  const [maxPage, setMaxPage] = useState(0);
  const [items, setItems] = useState([]);

  const USERS_URL = `https://jsonplaceholder.typicode.com/posts`;

  useEffect(() => {
    getItems();
  }, [currentPage]);

  function logsPagination(page) {
    setCurrentPage(page);
    console.log("currentPage " + currentPage + " page" + page);
  }

  function getItems() {
    fetch(`${USERS_URL}?page=${currentPage}&limit=5`, {
      method: "GET"
    })
      .then((response) => response.json())
      .then((data) => {
        let datacustom = {
          count: 13,
          results: data.splice(0, 10)
        };
        setItems(datacustom.results);
        setMaxPage(datacustom.count);
      });
  }

  return (
    <div>
      <table className="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => {
            return (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.id}</td>
                <td>{item.id}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      <section className="pagination">
        <button
          className="first-page-btn"
          onClick={() => {
            logsPagination(0);
          }}
          disabled={false}
        >
          first
        </button>
        <button
          className="previous-page-btn"
          onClick={() => {
            logsPagination(currentPage - 1);
          }}
          disabled={false}
        >
          previous
        </button>
        <button
          className="next-page-btn"
          onClick={() => {
            logsPagination(currentPage + 1);
          }}
          disabled={false}
        >
          next
        </button>
        <button
          className="last-page-btn"
          onClick={() => {
            logsPagination(maxPage);
          }}
          disabled={false}
        >
          last
        </button>
      </section>
    </div>
  );
}

标签： reactjs

解决方案

这是因为setStates调用（即setCurrentPage）本质上是异步的，这意味着在设置状态后立即执行 console.log 不会记录刚刚更新的值。相反，React 会将这些 setState 安排到下一个渲染中 - 因此，您只能在下一个渲染周期中查看/访问最新的值。来自官方 React 文档

  • 将 setState() 视为更新组件的请求而不是立即命令。为了更好地感知性能，React 可能会延迟它，然后一次更新多个组件。React 不保证立即应用状态更改
  • setState() 并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用 setState() 之后立即读取this.state是一个潜在的陷阱。取而代之的是 usecomponentDidUpdate或setStatecallback (setState(updater, callback))，它们都保证在应用更新后触发。

你可能还想看看我之前写过的关于这个问题的答案：React cannot update state

推荐阅读