套接字回调内的陈旧状态

Question

我试图使用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>