javascript 使用效果在状态更改时未触发

bvn4nwqk 于 2023-09-29 发布在 Java

关注(0)|答案(1)|浏览(88)

我使用MUI数据网格与服务器端渲染。我有我的页面设置状态，每次我更新www.example.com或pageState.pageSize属性时，我的fetchData函数都应该被调用pageState.page。不幸的是，当我移动页面或更改页面大小时，什么也没有发生，我也没有得到新的数据。我在我的fetchData函数中放置了一个console.log，当状态改变时，它看起来根本没有触发。

useEffect(() => {
    fetchData();
  }, [pageState.page, pageState.pageSize]);

<StyledDataGrid 
            rows={data} 
            columns={columns}
            rowCount={pageState.total}
            loading={pageState.isLoading}
            pagination
            page={pageState.page - 1}
            pageSize={pageState.pageSize}
            pageSizeOptions={[3,5,10]}
            paginationMode="server"
            onPageChange={(newPage: any) => setPageState(old => ({...old, page: newPage + 1}))}
            onPageSizeChange={(newPageSize: any) => setPageState(old => ({...old, pageSize: newPageSize}))}
            initialState={{
              pagination: {
                paginationModel: { pageSize: pageState.pageSize, page: pageState.page -1},
              },
            }}
            onPaginationModelChange={setPaginationModel}
            paginationModel={paginationModel}
            />

我试着直接调整对象的值，而不是制作一个新的对象，但这也不起作用。不知道还能尝试什么。

JavaScript

来源：https://stackoverflow.com/questions/77190105/use-effect-is-not-firing-on-state-change

1条答案

按热度按时间

rdrgkggo1#

我仍然很不确定是什么改变了页面状态。我将从StyledDataGrid中删除更改处理程序，只向其传递page和pageState的数值，并具有在StyledDataGrid外部更改这些值的机制。
举例来说：

function App() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  useEffect(() => {
    console.log("Page or page size changed");
  }, [page, pageSize]);

  return (
    <div>
      <button onClick={() => setPage(page + 1)}>Increase Page</button>
      <button onClick={() => setPageSize(pageSize + 1)}>Increase Page Size</button>
      <StyledDataGrid page={page} pageSize={pageSize} />
    </div>
  );
}

function StyledDataGrid({
  page,
  pageSize,
}: {
  page: number;
  pageSize: number;
}) {
  return (
    <div>
      <span>{`Page: ${page}`}</span>
      <br />
      <span>{`Page Size: ${pageSize}`}</span>
    </div>
  );
}

我个人避免使用setState回调（setState(old => ...)），除非我需要，所以在我的例子中，因为我们已经在范围中有了当前状态，我只是使用它。
我还决定将page和pageSize存储在两个独立的状态中，但是如果愿意，您可以继续将它们存储在单个对象状态中。

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 使用效果在状态更改时未触发

1条答案

相关问题

热门标签

最新问答