Javascript Usestate增量1不在setInterval中工作

由于某些原因，当我运行setCurrentPage时，这永远不会超过2，但是如果我这样递增它

    const [currentPage, setCurrentPage] = useState(1);     
    const handleScroll = () => {
            const gridContainer = document.querySelector(".grid");
    
            const totalPages = Math.ceil(
                gridContainer.scrollWidth / gridContainer.clientWidth + -0.1
            );
            setTotalPages(totalPages);
    
            const scrollPos =
                gridContainer.clientWidth + gridContainer.scrollLeft + 2;
            if (gridContainer.scrollWidth > scrollPos) {
                gridContainer.scrollBy({
                    left: gridContainer.clientWidth + 20.5,
                    behavior: "auto",
                    block: "center",
                    inline: "center",
                });
                setCurrentPage(currentPage + 1);
            } else {
                setCurrentPage(1);
                gridContainer.scrollTo(0, 0);
            }
        };
    
        useEffect(() => {
            setInterval(() => {
                document.querySelector(".grid") && handleScroll();
            }, 5000);
        }, []);

它按预期工作。我猜这与useEffect或setInterval有关，但并非100%确定原因。

在代码中的每个渲染上都会创建一个新的handleScroll函数

函数仅第一次传递给setInterval，因此此函数中的currentPage将始终保持为1，然后1+1始终为2

将handleScroll放入依赖项数组 一种解决方案是，只要有新的handlescroll，就创建一个新的setInterval：

---

这通常是完全可以的，但小心不要。

您可以共享完整组件吗？您应该在更新依赖于以前状态的状态时使用。谢谢。我最终切换到setTimeout，但这是一个非常好的替代解决方案。

 <button onClick={() => setCurrentPage(currentPage + 1)}>
                    +1
  </button

    useEffect(() => {
        let interval = setInterval(() => {   // <--- store the interval (to be able to remove it later)
            document.querySelector(".grid") && handleScroll();
        }, 500);

        // -- remove the interval inside the clean up function of useEffect
        return () => {
            clearInterval( interval );
        }
    }, [ handleScroll ]); // <--- add handleScroll to the dependency array

setCurrentPage((prevCurrentPage) => prevCurrentPage + 1);