Question

我是socket.io的新手，正在尝试实现一个简单的通知。

我的问题是我执行handleClick函数将open转换为真实值，并且当socket.on运行其读取错误的{/ {1}}默认值时。

Notification.js

open

编辑

这是我的const [open, setOpen] = useState(false); const handleClick = (event) => { setAnchorEl(event.currentTarget); if (!open) { setOpen(true) // set open to true } }; useEffect(() => { socket.on("notification", function (data) { console.log('SOCKET', open) // idk why this is reading false }) }, []) use-case函数，在该函数中，用户加载其通知，该通知会将handleClick设置为true，并在open运行时检查{{1} }为true，并将新通知分派到现有通知数组

socket

Answer 1

具有空的依赖项数组（[]）的效果将在组件安装时仅运行一次效果。而是将open添加到依赖项数组，以便在状态open的更新和上触发效果。问题是open的当前值包含在socket.on回调中，因此状态更新时，回调需要重新封装open。

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

const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    if (!open) {
        setOpen(true) // set open to true
    }
};

useEffect(() => {
    socket.on("notification", function (data) {
        console.log('SOCKET', open);
    })
}, [open]) // <-- add open to effect dependency

或者您可以在外部定义回调

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

const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    if (!open) {
        setOpen(true) // set open to true
    }
};

const socketOnHandler = data => console.log('SOCKET', open);

useEffect(() => {
    socket.on("notification", socketOnHandler)  // <-- use callback
}, [])

Answer 2

我不确定这是正确的方法。为了使其正常工作，当您在没有依赖的情况下将socket.on放入useEffect时，它看起来可以解决问题。

useEffect(() => {
    socket.on("notification", function (data) {
        console.log('SOCKET', open) // idk why this is reading false
    })
});

再过一次，我不确定这种方式是否正确。

在socket.on上反应useState值不正确

2 个答案: