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

Question

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

我的问题是，我执行handleClick函数以将open转换为真值，并且当socket.on运行其读取不正确/默认值的open时。

Notification.js

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函数，用户在其中加载将open设置为true的通知，当socket运行时，它将检查open是否为true，并将新通知分派给现有的通知数组

const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    if (!open) {
        setOpen(true) // set open to true
        dispatch(getNotifications(params)) // load user notifications
    }
};

useEffect(() => {
    socket.on("notification", function (data) {
        console.log('SOCKET', open) // returning false always
        notificationData(data.data)
    })
}, [])

const notificationData = ({ sender, message, notif }) => {
    setNotifCounter(notifCounter => notifCounter + 1)
    setNotification(_.startCase(sender) + ' - ' + message, 'info')
    if (open) { // check if user already loaded his/her own notification
        dispatch(getNewNotif(notif)) // push to array to avoid duplicate
    }
}

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
    })
});

再说一次，我不知道这样做是否合适。