react：功能组件内部的方法无法获取useState变量的最新值

Question

我有以下代码：

import { useState, useEffect } from "preact/hooks";

export function App() {
    const [pageContent, setPageContent] = useState("");

    useEffect(() => {
        setPageContent("main");

        window.addEventListener("scroll", handleScroll);
    }, []);

    useEffect(() => {
        console.log(222, pageContent); // main
    }, [pageContent]);

    const handleScroll = () => {
        console.log(333, pageContent); // ""
    };

    retrun (
        <>
            <p>enough content to make the page scroll</p>
        </>
    )
}

我预计在代码第17行，也就是

console.log(333)

的位置，

pageContent

应该是“main”，但它是初始化值“”。 我很困惑，谁能告诉我为什么以及如何获得预期的“主要”？

Answer 1

你这里有几个重大错误：

• 不要创建仅在

  useEffect

  之外的

  useEffect

  中使用的回调函数
您的
• useEffect

   需要 

  pageContent

   的值，因此它必须具有 

  pageContent

   作为依赖项

如果
• pageContent

   不应该在组件中的其他地方更改，请不要使用 

  useState

  ，也不要使用 

  useRef

  ，使用一个简单的变量。即：

  const pageContent = 'main'

  。如果 

  pageContent

   的值是从其他值导出的，这也适用。

Use 必须在 useEffect 的返回中取消订阅任何事件监听器

这就是以上各点的示范：

export function App() {
    const [pageContent, setPageContent] = useState("");

    useEffect(() => {
        setPageContent("main");

        const handleScroll = () => {
            console.log(333, pageContent);
        };    
        const unsubscribe = window.addEventListener("scroll", handleScroll);

        return unsubscribe;
    }, [pageContent]);
 
    retrun (
        <>
            <p>enough content to make the page scroll</p>
        </>
    )
}