홈>
다음 오류가 발생합니다.
"Uncaught TypeError: Cannot read property 'setState' of undefined
at Socket.eval (CommunicationContainer.js?41c1:40)
at Socket.Emitter.emit (index.js?7297:133)
at Socket.onevent (socket.js?2851:278)
at Socket.onpacket (socket.js?2851:236)
at Manager.eval (index.js?40de:21)
at Manager.Emitter.emit (index.js?7297:133)
at Manager.ondecoded (manager.js?78eb:345)
at Decoder.eval (index.js?40de:21)
at Decoder.Emitter.emit (index.js?7297:133)
at Decoder.add (index.js?568d:251)
"
내가 찾은 모든 것은 생성자 내에서 바인딩이 올바르게 수행되지 않았기 때문에 모든 바인딩 후에 올바른 바인딩이 있고이 오류가 발생하는 이유를 알 수없는 한 모든 작업을 수행 한 것입니다. . 이 오류는 내가 첨부 한 CommmunicationContainer에서 발생한다고 표시합니다.
통신 컨테이너
import React from 'react'
import { PropTypes } from 'prop-types';
import Remarkable from 'remarkable-react'
import MediaContainer from './MediaContainer'
import Communication from '../components/Communication'
import store from '../store/configureStore'
import { connect } from 'react-redux'
class CommunicationContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
sid: '',
message: '',
audio: true,
video: true
};
this.handleInvitation = this.handleInvitation.bind(this);
this.handleHangup = this.handleHangup.bind(this);
this.handleInput = this.handleInput.bind(this);
this.toggleVideo = this.toggleVideo.bind(this);
this.toggleAudio = this.toggleAudio.bind(this);
this.send = this.send.bind(this);
this.hideAuth = this.hideAuth.bind(this);
this.full = this.full.bind(this);
}
hideAuth() {
this.props.media.setState({bridge: 'connecting'});
}
full() {
this.props.media.setState({bridge: 'full'});
}
componentDidMount() {
console.log('Comments componentDidMount: ');
console.log(this);
const socket = this.props.socket;
console.log('props', this.props)
this.setState({video: this.props.video, audio: this.props.audio});
socket.on('create', () =>
this.props.media.setState({user: 'host', bridge: 'create'}));
socket.on('full', this.full);
socket.on('bridge', role => this.props.media.init());
socket.on('join', () =>
this.props.media.setState({user: 'guest', bridge: 'join'}));
socket.on('approve', ({ message, sid }) => {
this.props.media.setState({bridge: 'approve'});
this.setState({ message, sid });
});
socket.emit('find');
this.props.getUserMedia
.then(stream => {
this.localStream = stream;
this.localStream.getVideoTracks()[0].enabled = this.state.video;
this.localStream.getAudioTracks()[0].enabled = this.state.audio;
});
}
handleInput(e) {
this.setState({[e.target.dataset.ref]: e.target.value});
}
send(e) {
e.preventDefault();
this.props.socket.emit('auth', this.state);
this.hideAuth();
}
handleInvitation(e) {
e.preventDefault();
this.props.socket.emit([e.target.dataset.ref], this.state.sid);
this.hideAuth();
}
getContent(content) {
return {__html: (new Remarkable()).render(content)};
}
toggleVideo() {
const video = this.localStream.getVideoTracks()[0].enabled = !this.state.video;
this.setState({video: video});
this.props.setVideo(video);
}
toggleAudio() {
const audio = this.localStream.getAudioTracks()[0].enabled = !this.state.audio;
this.setState({audio: audio});
this.props.setAudio(audio);
}
handleHangup() {
this.props.media.hangup();
}
render(){
console.log(this.media);
return (
<Communication
{...this.state}
toggleVideo={this.toggleVideo}
toggleAudio={this.toggleAudio}
getContent={this.getContent}
send={this.send}
handleHangup={this.handleHangup}
handleInput={this.handleInput}
handleInvitation={this.handleInvitation} />
);
}
}
const mapStateToProps = store => ({video: store.video, audio: store.audio});
const mapDispatchToProps = dispatch => (
{
setVideo: boo => store.dispatch({type: 'SET_VIDEO', video: boo}),
setAudio: boo => store.dispatch({type: 'SET_AUDIO', audio: boo})
}
);
CommunicationContainer.propTypes = {
socket: PropTypes.object.isRequired,
getUserMedia: PropTypes.object.isRequired,
audio: PropTypes.bool.isRequired,
video: PropTypes.bool.isRequired,
setVideo: PropTypes.func.isRequired,
setAudio: PropTypes.func.isRequired,
media: PropTypes.instanceOf(MediaContainer)
};
export default connect(mapStateToProps, mapDispatchToProps)(CommunicationContainer);
오류가 관련이있는 경우를 대비하여 참조를 위해 다른 컨테이너 및 구성 요소를 포함 시켰지만 소켓 오류에서 상태가 정의되지 않은 CommunicationContainer 내에 오류가 표시됩니다. 또한 오류 이미지를 포함 시켰습니다. 이 응용 프로그램은 사용자가 방 ID를 설정하고 버튼을 누르면 방으로 시작되는 React 웹 사이트 내의 WebRTC React 페이지입니다. 오류 코드 오류 라인
채팅방 페이지
import React, { Component } from 'react';
import MediaContainer from './MediaContainer'
import CommunicationContainer from './CommunicationContainer'
import { connect } from 'react-redux'
import store from '../store/configureStore'
import io from 'socket.io-client'
class ChatRoomPage extends React.Component {
constructor(props) {
super(props);
this.getUserMedia = navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).catch(e => alert('getUserMedia() error: ' + e.name))
this.socket = io.connect('https://localhost:8080');
}
componentDidMount() {
this.props.addRoom();
}
render() {
console.log(this.socket);
console.log(this.getUserMedia);
console.log(this.media);
return (
<div>
<MediaContainer media={media => this.media = media} socket={this.socket} getUserMedia={this.getUserMedia} />
<CommunicationContainer socket={this.socket} media={this.media} getUserMedia={this.getUserMedia} />
<h1>AppointmentSetup</h1>
</div>
);
}
}
//commented out
const mapStateToProps = store => ({rooms: new Set([...store.rooms])});
const mapDispatchToProps = (dispatch, ownProps) => (
{
addRoom: () => store.dispatch({ type: 'ADD_ROOM', room: ownProps.match.params.room })
}
);
export default connect(mapStateToProps, mapDispatchToProps)(ChatRoomPage);
미디어 컨테이너
import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
class MediaBridge extends Component {
constructor(props) {
super(props);
this.state = {
bridge: '',
user: ''
}
this.onRemoteHangup = this.onRemoteHangup.bind(this);
this.onMessage = this.onMessage.bind(this);
this.sendData = this.sendData.bind(this);
this.setupDataHandlers = this.setupDataHandlers.bind(this);
this.setDescription = this.setDescription.bind(this);
this.sendDescription = this.sendDescription.bind(this);
this.hangup = this.hangup.bind(this);
this.init = this.init.bind(this);
this.setDescription = this.setDescription.bind(this);
}
componentWillMount() {
// chrome polyfill for connection between the local device and a remote peer
window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection;
this.props.media(this);
}
componentDidMount() {
this.props.getUserMedia
.then(stream => this.localVideo.srcObject = this.localStream = stream);
this.props.socket.on('message', this.onMessage);
this.props.socket.on('hangup', this.onRemoteHangup);
}
componentWillUnmount() {
this.props.media(null);
if (this.localStream !== undefined) {
this.localStream.getVideoTracks()[0].stop();
}
this.props.socket.emit('leave');
}
onRemoteHangup() {
this.setState({user: 'host', bridge: 'host-hangup'});
}
onMessage(message) {
if (message.type === 'offer') {
// set remote description and answer
this.pc.setRemoteDescription(new RTCSessionDescription(message));
this.pc.createAnswer()
.then(this.setDescription)
.then(this.sendDescription)
.catch(this.handleError); // An error occurred, so handle the failure to connect
} else if (message.type === 'answer') {
// set remote description
this.pc.setRemoteDescription(new RTCSessionDescription(message));
} else if (message.type === 'candidate') {
// add ice candidate
this.pc.addIceCandidate(
new RTCIceCandidate({
sdpMLineIndex: message.mlineindex,
candidate: message.candidate
})
);
}
}
sendData(msg) {
this.dc.send(JSON.stringify(msg))
}
// Set up the data channel message handler
setupDataHandlers() {
this.dc.onmessage = e => {
var msg = JSON.parse(e.data);
console.log('received message over data channel:' + msg);
};
this.dc.onclose = () => {
this.remoteStream.getVideoTracks()[0].stop();
console.log('The Data Channel is Closed');
};
}
setDescription(offer) {
this.pc.setLocalDescription(offer);
}
// send the offer to a server to be forwarded to the other peer
sendDescription() {
this.props.socket.send(this.pc.localDescription);
}
hangup() {
this.setState({user: 'guest', bridge: 'guest-hangup'});
this.pc.close();
this.props.socket.emit('leave');
}
handleError(e) {
console.log(e);
}
init() {
// wait for local media to be ready
const attachMediaIfReady = () => {
this.dc = this.pc.createDataChannel('chat');
this.setupDataHandlers();
console.log('attachMediaIfReady')
this.pc.createOffer()
.then(this.setDescription)
.then(this.sendDescription)
.catch(this.handleError); // An error occurred, so handle the failure to connect
}
// set up the peer connection
// this is one of Google's public STUN servers
// make sure your offer/answer role does not change. If user A does a SLD
// with type=offer initially, it must do that during the whole session
this.pc = new RTCPeerConnection({iceServers: [{url: 'stun:stun.l.google.com:19302'}]});
// when our browser gets a candidate, send it to the peer
this.pc.onicecandidate = e => {
console.log(e, 'onicecandidate');
if (e.candidate) {
this.props.socket.send({
type: 'candidate',
mlineindex: e.candidate.sdpMLineIndex,
candidate: e.candidate.candidate
});
}
};
// when the other side added a media stream, show it on screen
this.pc.onaddstream = e => {
console.log('onaddstream', e)
this.remoteStream = e.stream;
this.remoteVideo.srcObject = this.remoteStream = e.stream;
this.setState({bridge: 'established'});
};
this.pc.ondatachannel = e => {
// data channel
this.dc = e.channel;
this.setupDataHandlers();
this.sendData({
peerMediaStream: {
video: this.localStream.getVideoTracks()[0].enabled
}
});
//sendData('hello');
};
// attach local media to the peer connection
this.localStream.getTracks().forEach(track => this.pc.addTrack(track, this.localStream));
// call if we were the last to connect (to increase
// chances that everything is set up properly at both ends)
if (this.state.user === 'host') {
this.props.getUserMedia.then(attachMediaIfReady);
}
}
render(){
console.log(this.media);
console.log(this.getUserMedia)
return (
<div className={`media-bridge ${this.state.bridge}`}>
<video className="remote-video" ref={(ref) => this.remoteVideo = ref} autoPlay></video>
<video className="local-video" ref={(ref) => this.localVideo = ref} autoPlay muted></video>
</div>
);
}
}
MediaBridge.propTypes = {
socket: PropTypes.object.isRequired,
getUserMedia: PropTypes.object.isRequired,
media: PropTypes.func.isRequired
}
export default MediaBridge;
이 안에 바인딩 문제가 표시되지 않지만 시도한 결과에 관계없이 오류가 계속 발생하므로 도움을 주시면 감사하겠습니다.
-
답변 # 1
관련 자료
- node.js - nodejs 인증 시스템에서"typeerror - 정의되지 않은 '이메일'속성을 읽을 수 없습니다 "
- javascript - typeerror - cannot read property 'name'of undefined (in create react app : appjs)
- javascript - typeerror - 정의되지 않은 속성 '값'을 읽을 수 없습니다반응 형 미리보기
- javascript - typeerror - commercejs로 정의되지 않은 'tolowercase'속성을 읽을 수 없습니다
- 포착되지 않은 typeerror - reactjs 애플리케이션에서 정의되지 않은 'map'속성을 읽을 수 없습니다
- javascript - typeerror - 사용자에게 메시지를 보내려고 할 때 정의되지 않은 '보내기'속성을 읽을 수 없습니다
- javascript - typeerror - reactdatagrid에서 undefined 속성 'length'를 읽을 수 없습니다
- javascript - typeerror - 정의되지 않은 nodejs express mvc의 'render'속성을 읽을 수 없습니다
- javascript - typeerror - 정의되지 않은 '상태'속성을 설정할 수 없습니다
- angular8 - angular 8 - typeerror : 프로덕션 용 코드를 빌드 할 때 정의되지 않은 '종류'속성을 읽을 수 없습니다
- typeerror - reactjs 양식 필드에서 정의되지 않은 '이름'속성을 읽을 수 없습니다
- javascript - typeerror - 정의되지 않은 '맵'속성을 읽을 수 없습니다 해결책을 찾을 수 없습니다
- react router - typeerror - 정의되지 않은 reactjs의 'push'속성을 읽을 수 없습니다
- javascript - typeerror - reactjs에서 정의되지 않은 'map'속성을 읽을 수 없습니다
- javascript - typeerror - 정의되지 않은 '필터'속성을 읽을 수 없습니다개체 데이터
- typescript - typeerror - > serverresponsejson에서 정의되지 않은 속성 'get'을 읽을 수 없습니까?
- node.js - discordjs typeerror - 정의되지 않은 속성 '크기'를 읽을 수 없습니다
- reactjs - typeerror - 정의되지 않은 'temp'속성을 읽을 수 없습니다
- javascript - typeerror - 알고리즘 거래에서 정의되지 않은 'then'속성을 읽을 수 없습니다
- [karma server] TypeError Cannot read property 'range' of undefined - [karma-server] - typeerror : 정의되지 않은 '범위'
관련 질문
- javascript - 반응 함수 구성 요소의 끝에서 값을 반환 할 것으로 예상되는 linter를 수정하는 방법은 무엇입니까?
- javascript - 컴포넌트가 렌더링되기 전에 한 번만 Hook 호출 (Meteor/React/Apollo/Graphql)
- javascript - react native 오류 실패한 소품 유형 - `오버레이`에 제공된`배열`유형의 잘못된 소품`하위`,
- javascript - react-redux - 시도 된 가져 오기 오류 : '/components/score'에 기본 내보내기가 포함되어 있지 않습니다 ( 'score'로 가져옴)
- javascript - 콜백 내에서 React Hook "useState"를 호출 할 수 없습니다
- javascript - SVG 요소의 너비와 높이를 제어하는 방법
- javascript - 반응에서 목록 그룹 항목의 스타일을 전환하기 위해 div 대상에 액세스하는 방법은 무엇입니까?
- reactjs - 상태에서 매핑 된 목록 항목 순환 (javascript)
- javascript - enoent - react-native 프로젝트에서 react-navigation을 설치할 때 그러한 파일이나 디렉토리가 없습니다
- javascript - video-react - handlestatechange는 한 번만 호출되어야 할 때 여러 번 호출됩니다
이 메소드는 컨트롤러에서 bin bind를 가지고 있지 않으며 다른 메소드에서 호출하는 것이 원인 일 수 있습니다! 와이즈 비즈
hideAuth() full()