套接字回调内的陈旧状态

问题描述

我试图使用React钩子建立套接字连接。尝试访问套接字回调函数内的状态变量时，我得到的陈旧值。套接字回调中的users变量没有最新值。使用useRef可以，但是不会重新渲染组件。什么是对此更好的解决方案？谢谢！

const [users,setUsers] = useState([]);
const [socket,setSocket] = useState(null);
const result = useParams();

useEffect(() => {
    const socket = io(`${config.host}?meetingId=${result.id}`);
    socket.request = promise(socket);
    setSocket(socket);
},[]);

useEffect(() => {
    if (!socket) return;
    let webrtc = null;
    
    socket.on('UserLeft',({ id }) => {
        setUsers(users => users.filter(user => user.id !== id))
    });

    socket.on('UserAdded',({ name,id }) => {
        const newUser = new OtherUser(name,id);
        setUsers(users => [...users,newUser])
    })

    socket.on('newProducer',async (data) => {
        const { socketId,kind } = data;

        const consumer = await webrtc.createConsumer(socketId,kind);
        
        // Issue is here,the users array still has stale values
        const user = users.find(ele => ele.id === socketId);
        
        // Some more stuff with user
    })

},[socket]);

// Here the output is correct
console.log(users)


return <div>HELLO</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）