如何解决在 react-js 中的 useRef() 上出现未定义的错误
我正在开发基于 webRtc 的视频会议应用程序并从浏览器获取视频流
const myVideo = useRef();
const userVideo = useRef();
const connectionRef = useRef();
useEffect(() => {
navigator.mediaDevices.getUserMedia({ video: true,audio: true })
.then((currentStream) => {
setStream(currentStream);
myVideo.current.srcObject = currentStream;
})
.catch((err) => {
console.log("Not able to get user media permisiion",err);
})
socket.on('me',(id) => setMe(id));
socket.on('callUser',({ from,name: callerName,signal }) => {
setCall({ isReceivingCall: true,from,signal });
});
},[]);
我收到错误 Not able to get user media permisiion TypeError: myVideo.current is undefined
解决方法
Ref.current 为空,因为直到函数返回并呈现内容之后才会设置 ref。每次传递给它的数组内容的值更改时,useEffect
钩子都会触发。通过在数组中传递观察,可以利用 useEffect 钩子来完成您的任务。
useEffect(() => {
navigator.mediaDevices.getUserMedia({ video: true,audio: true })
.then((currentStream) => {
setStream(currentStream);
myVideo.current.srcObject = currentStream;
})
.catch((err) => {
console.log("Not able to get user media permisiion",err);
})
socket.on('me',(id) => setMe(id));
socket.on('callUser',({ from,name: callerName,signal }) => {
setCall({ isReceivingCall: true,from,signal });
});
},[myVideo]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。