javascript 为什么我的useEffect即使在依赖项没有更改的情况下也在运行？

g6ll5ycj 于 2023-04-10 发布在 Java

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

我做了一个按钮和一个状态来切换按钮点击时的内容。我有20个项目要显示，在初始状态下只显示6个项目。当点击按钮时，所有20个项目都显示。这是用例。然而，当我浏览页面并返回到此页面时，即使状态'showContent'保持不变，useEffect也在运行。我在context中管理状态，导航使用react router完成。

const [showContent, setShowContent] = useState(false);

useEffect(() => {
window.scrollTo({top: 1400, left: 0, behavior: 'smooth' });
console.log(showContent)
 }, [showContent]);

    <button onClick={() => setShowContent(!showContent)}>
      {showContent ? "Show Less" : "Show More"}
    </button>

这是我尝试的代码，它的工作。然而，每当我访问这个页面的'窗口，滚动到'正在运行。感谢帮助1：）

JavaScript

来源：https://stackoverflow.com/questions/75967967/why-is-my-useeffect-running-even-when-there-is-no-change-in-the-dependency

1条答案

按热度按时间

4ioopgfo1#

useEffect文档：
设置：带有Effect逻辑的函数。您的setup函数也可以选择返回一个cleanup函数。**当您的组件首次添加到DOM时，React将运行您的setup函数。**每次使用更改的依赖项重新渲染后，React将首先运行cleanup函数（如果您提供了它），然后使用新值运行设置函数。从DOM中删除组件后，React将最后一次运行清理函数。
https://react.dev/reference/react/useEffect#useeffect
正如注解中所解释的，useEffect总是运行一次，并且（如果依赖项发生变化）将在以后再次运行。
您可以尝试在第一次运行时不执行任何操作：

useEffect(() => {
  if(!showContent) return;
  window.scrollTo({top: 1400, left: 0, behavior: 'smooth' });
  console.log(showContent)
 }, [showContent]);

我猜1400是你在显示剩下的14个项目时计算向下滚动的距离。也许你可以使用一个整数来表示显示的项目数，而不是showContent的布尔值。

const [visibleItems, setVisibleItems] = useState(6);

useEffect(() => {
  const top = (visibleItems - 6) * 100; // 0 for 6 items, 1400 for 20
  window.scrollTo({top, left: 0, behavior: 'smooth' });
  console.log(visibleItems)
 }, [visibleItems]);

    <button onClick={() => setVisibleItems(visibleItems === 6 ? 20 : 6)}>
      {showContent ? "Show Less" : "Show More"}
    </button>

有了这个变化，你的“显示更少”也将滚动回顶部（如果你想用分页来替换显示更多/更少，那么这也适用于数量〉20）。

赞(0）回复(0）举报 2023-04-10

我来回答

javascript 为什么我的useEffect即使在依赖项没有更改的情况下也在运行？

1条答案

相关问题

热门标签

最新问答