無法在反應中訪問更新的狀態

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 的事件