无法在反应中访问更新的状态

Question

我无法在函数中访问我更新的状态。 这是我的场景：

我有一个getImages()函数，当组件第一次加载或用户在滚动以通过 API 调用获取新图像时到达页面末尾时会调用该函数。 在第一次加载组件时，我想给出随机页面值，这就是为什么我从第一个 useEffect 钩子传递一个随机数，当用户到达页面末尾时，我想使用 pageNum 状态。 但是每次到达页面末尾时，API 调用以及控制台日志中的 pageNum 值都为 0。 我期待更新的 pageNum 状态，因为每次在 getImages() 函数结束时，pageNum 状态都会增加 1。我检查了反应开发工具，并且 pageNum 状态正在正确更新。

这是我的代码片段：

图像状态正在正确更新，它正在利用现有状态并在每次调用时附加新图像。

    const [images, setImages] = useState([]);

    const [pageNum, setPageNum] = useState(0);
 
    useEffect(() => {
        getImages(Math.floor(Math.random() * 100) + 1);
    }, []);

    useEffect(() => {
        window.addEventListener("scroll", () => {
            if((window.innerHeight + window.scrollY) === document.body.scrollHeight){
                getImages();
            }
        });
        
    }, []);

    async function getImages(pageNo){
        let response;
        console.log(pageNum);
        if(pageNo === undefined){
            response = await fetch(`<API URL>&page=${pageNum}`);
        }
        else{
            response = await fetch(`<API URL>&page=${pageNo}`);
        }
        const data = await response.json();

        setImages(function(currentState){
            return [...currentState, ...data];
        });
        setPageNum(function(currentState){
            return currentState + 1;
        });
    }

如果我遗漏了什么，请告诉我。

Answer 1

原因：

问题发生在您没有将 pageNum 作为 useEffect 依赖项之前。 因为您在第一次安装组件时添加了事件侦听器（当时 pageNum 为 0）。 并且因为您没有将 pageNum 添加到 useEffect 依赖项 pageNum 值将永远不会更新。

解决方案：

const [images, setImages] = useState([]);

    const [pageNum, setPageNum] = useState(0);
 
    useEffect(() => {
        getImages(Math.floor(Math.random() * 100) + 1);
    }, []);

    useEffect(() => {
        const fetchImgOnCrollHandler = () => {
            if((window.innerHeight + window.scrollY) === document.body.scrollHeight){
                getImages();
            }
        }
        window.addEventListener("scroll", fetchImgOnScrollHandler);
        return () => {
          window.removeEventListener('scroll', fetImgOnScrollHandler);
        }
    }, [pageNum]);

    async function getImages(pageNo){
        let response;
        console.log(pageNum);
        if(pageNo === undefined){
            response = await fetch(`<API URL>&page=${pageNum}`);
        }
        else{
            response = await fetch(`<API URL>&page=${pageNo}`);
        }
        const data = await response.json();

        setImages(function(currentState){
            return [...currentState, ...data];
        });
        setPageNum(function(currentState){
            return currentState + 1;
        });
    }

现在每次pageNum 更新。 附加到窗口的滚动事件将被删除并添加新的带有新 pageNum 的事件