时间戳

首页 > 解决方案 > setInterval 中的 setState 未按预期工作。任何想法为什么？

reactjs - setInterval 中的 setState 未按预期工作。任何想法为什么？

问题描述

我想每 2 秒更新一次状态并渲染一些图像 这绝对没问题

useEffect(() => {
    setTimeout(() => {
      if (workImages.currentIndex > workImages.items.length - 2) {
        setWorkImages({ ...workImages, currentIndex: 0 });
      } else {
        setWorkImages({
          ...workImages,
          currentIndex: ++workImages.currentIndex,
        });
      }
    }, 2000);
  }, [workImages]);

这仅适用于其他情况

useEffect(() => {
    setInterval(() => {
      if (workImages.currentIndex > workImages.items.length - 2) {
        setWorkImages({ ...workImages, currentIndex: 0 });
      } else {
        setWorkImages({
          ...workImages,
          currentIndex: ++workImages.currentIndex,
        });
      }
    }, 2000);
  }, []);

谁能解释为什么？

标签： reactjsreact-hookssettimeoutsetintervalsetstate

解决方案

第一个示例有效，因为它侦听 workImages。因此，每次 workImages 更改时，您都会使用 setWorkImages 设置一个新图像。

第二个示例仅在加载页面时触发ONCE 。

有关 useEffect 的更多信息，请查看此处：https ://reactjs.org/docs/hooks-effect.html

推荐阅读