Question

我对此代码有疑问

如果我将整个pagination对象传递给useEffect()函数的第二个参数，那么fetchData()将连续调用。如果我仅传递pagination.current_page，那么它将仅调用一次，但是当我在pagination函数中看到新的navigatePage()设置时，useEffect()不会调用{{ 1}}，尽管fetchData()已更改。

如何解决此问题。非常感谢！

此外，我不想在首次安装组件时使用pagination调用，因为useEffect()是从props接收的（由服务器获取，这是nextjs项目）。

items

Answer 1

问题是您没有返回新对象引用。您保存对最后一个状态对象的引用，对它的属性进行突变，然后再次保存。

const navigatePage = (pager) => {
  const newPagination = pagination; // copy ref pointing to pagination
  newPagination.current_page = pager; // mutate property on ref
  setPagination(newPagination); // save ref still pointing to pagination
};

在这种情况下，是 pagination在内存中的位置保持不变。相反，您应该将所有pagination属性复制到一个新对象。

const navigatePage = (pager) => {
  const newPagination = {...pagination}; // shallow copy into new object
  newPagination.current_page = pager;
  setPagination(newPagination); // save new object
};

要更进一步，您确实应该进行功能更新，以便正确地排队更新。在setPagination在一个渲染周期内被多次调用的情况下。

const navigatePage = (pager) => {
  setPagination(prevPagination => {
    const newPagination = {...prevPagination};
    newPagination.current_page = pager;
  });
};

在分页排队更新的情况下可能不是问题（最后一个当前页面集将赢得下一次渲染大战），但实际上是否有任何状态更新取决于以前的值，那么肯定使用功能更新模式，

尽管我通过了第二个参数，但是React Hook useEffect（）连续运行

1 个答案: