为什么我无法访问窗口事件处理程序中的状态？

Question

我现在开始学习react.js并开发一个个人项目。我遇到了问题，但找不到问题所在。

    const [open, setOpen] = useState(false);

    const handleScroll = () => {
        const { scrollHeight, clientHeight } = document.documentElement;

        console.log(open);
    };

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
        // eslint-disable-next-line
    }, []);

我设置了窗口滚动事件处理程序，并在handleScroll函数中，我想显示打开状态的变化。但即使我已经改变了它，它总是显示错误。请帮我看看出了什么问题。

我尝试将打开状态传递给handleScroll，但它不起作用。

Answer 1

我看到了你的问题，我有一个想法。

当组件渲染时，它会创建 handleScroll 函数。 之后，handleScroll函数就变成了一个闭包。所以即使你尝试改变它（setOpen（true） - 像这样），这是不可能的。 handleScroll函数仍然引用'false'，因为'open'是闭包的一部分。

所以你应该使用'useCallback'钩子来更改值。

我在下面编写的代码可以更改单击按钮时打开的值。

const [open, setOpen] = useState(false);

const handleScroll = useCallback(() => {
    const { scrollHeight, clientHeight } = document.documentElement;

    console.log(open);
}, [open]);

useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
        window.removeEventListener('scroll', handleScroll)
    }
    // eslint-disable-next-line
}, [handleScroll]);

return (
    <button onClick={() => setOpen(true)} >Click</button>
);

希望这段代码对您有帮助！