如何解决套接字回调内的陈旧状态
我试图使用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 举报,一经查实,本站将立刻删除。