Реагировать на неверное значение useState на socket.on - PullRequest
Новая
       73

Реагировать на неверное значение useState на socket.on

1 голос
/ 14 июля 2020

Я новичок в socket.io и пытаюсь реализовать простое уведомление.

Моя проблема в том, что я выполняю функцию handleClick, чтобы преобразовать open в истинное значение и когда socket.on запустить неверное чтение / значение по умолчанию open.

Уведомление. 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
    })
}, [])

EDIT

Вот мой use-case handleClick fun c - это то место, где пользователь загружает свое уведомление, которое установит open в значение true, а при запуске socket он проверит, истинно ли open, и отправит новое уведомление в существующий массив уведомлений 

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

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Эффект с пустым массивом зависимостей ([]) запустит эффект только один раз при монтировании компонента. Вместо этого добавьте 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
}, [])
0 голосов
/ 14 июля 2020

Я не уверен, что это правильный путь. Чтобы заставить его работать, когда вы вводите socket.on в useEffect без зависимости, он, похоже, решает проблему. 

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

Еще раз, я не уверен, что этот способ является правильным.

...