React js - 无法正确设置变量的状态答案

【问题标题】：React js - unable to set state of variable properlyReact js - 无法正确设置变量的状态
【发布时间】：2021-03-16 02:24:31
【问题描述】：

我在 React 中有一个功能组件，但在正确设置变量的状态时遇到了一些麻烦。我有一个用于我的网站的分页组件，当我单击第 2 或第 3 页等时，我想知道我所在的页面。如果你看到下面的设置，我决定使用 handlepage 函数设置页面的状态根据我按哪个页面的页面。但是，在我的另一个函数 onChangePage 中，当我认为应该工作的控制台日志时，我无法获得正确的页面值，因为我已经使用分页组件中的 onchange 设置了页面的状态。可能发生这种情况是因为在分页组件中我同时调用了这两个函数，这导致了问题。请告诉我如何解决这个问题，这真的很有帮助，我需要 onChangePage 中页面的正确值。

function Build() {
    const [page, setPage] = React.useState(1);

    const handlePage = (event, value) => {
      setPage(value);
    }

    // Function for pagination, calls redux
    const onChangePage = (name, val, page) => {

    console.log(page)
    console.log("PAGING HERE")
    dispatch(getAllPreownedCars(6, dataOptions.skip, filters, dataOptions.searchText, [val]));
  }


   return(
      <Pagination 
         count={5} 
         onClick={() => onChangePage("Price (Lowest to Highest)", "selling_Price ASC", page)} 
         page={page}
         onChange={handlePage} />
   );

}

export Build;

【问题讨论】：

状态更改是异步的，但除此之外，为什么您有两个单独的函数负责处理页面更改？
其中一个需要传入 2 个字符串，分别是“Price（最低到最高）”、“sales_Price ASC”。有没有办法将这两个字符串传递给handlePage？我试过了，它对我不起作用，你可以试试让我知道

标签： javascript reactjs pagination

【解决方案1】：

React 状态更新是异步的，并且在渲染周期之间进行处理。您可能同时执行两个回调，因此来自一个的入队状态更新不会在另一个中可用。

有没有办法将这两个字符串传递给handlePage？

是的，您可以将onChange 事件对象和值代理到您的处理程序。考虑一下匿名函数的思路如下：

const handlePage = (event, page, string1, string2) => {....}
...
onChange={(event, page) => handlePage(event, page, string1, string2)}

下面我把handlePage写成一个柯里化函数，首先使用你想要传递的两个字符串，然后返回一个回调函数来使用onChange事件对象和新页面值。

const handlePage = (name, val) => (event, page) => {
  console.log(page);
  console.log("PAGING HERE");
  setPage(page);

  dispatch(
    getAllPreownedCars(6, dataOptions.skip, filters, dataOptions.searchText, [val])
  );
};

代码

function Build() {
  const [page, setPage] = React.useState(1);

  const handlePage = (name, val) => (event, page) => {
    console.log(page);
    console.log("PAGING HERE");
    setPage(page);

    dispatch(
      getAllPreownedCars(6, dataOptions.skip, filters, dataOptions.searchText, [val])
    );
  };

  return (
    <Pagination
      count={5}
      page={page}
      onChange={handlePage("Price (Lowest to Highest)", "selling_Price ASC")}
    />
  );
}

【讨论】：