2

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

0 回答 0