ReactJS开发遇render()缺少分号解析错误，求代码修复指导

你遇到的render()位置缺少分号报错是典型的语法错位提示，问题并不在render方法本身，而是前面的componentDidMount方法存在花括号不匹配问题，导致JS解析器误将render识别为方法内的变量声明，才抛出了分号缺失的错误。

具体需要修改的位置 #

• 修复this.pc.onicecandidate回调的闭合花括号缺失问题
  原代码中该回调函数执行完if判断后没有加闭合花括号，导致整个componentDidMount方法没有正确结束，修正后代码片段如下：

  this.pc.onicecandidate = (e) => {
    if (e.candidate) {
      this.sendToPeer('candidate', e.candidate)
    }
  } // 原代码缺失这行闭合花括号
  

• 删除代码末尾冗余的闭合花括号：原代码在render方法结束后、App类结束前多写了一个}，直接删除即可。
• 额外注意：你代码中调用的sendToPeer方法目前没有定义，后续运行功能时需要补充该方法的实现，否则会触发运行时错误。

修正后完整代码 #

import React, { Component } from "react"
import io from 'socket.io-client'

class App extends Component{
  constructor(props){
    super(props)

    this.localVideoref = React.createRef()
    this.remoteVideoref = React.createRef()

    this.socket = null
  }

  // 补充缺失的sendToPeer方法示例
  sendToPeer = (type, payload) => {
    this.socket.emit(type, payload)
  }

  componentDidMount = () =>{
    this.socket = io(
      '/webrtcPeer',
      {
        path: '/webrtc',
        query: {}
      }
    )

    this.socket.on('connection-success', success => {
      console.log(success)
    })

    this.socket.on('offerOrAnswer', (sdp) => {
      this.textref.value = JSON.stringify(sdp)
      this.pc.setRemoteDescription(new RTCSessionDescription(sdp))
    })

    this.socket.on('candidate', (candidate) => {
      this.pc.addIceCandidate(new RTCIceCandidate(candidate))
    })

    const pc_config = {
      "iceServers": [
        {
          urls : 'stun:stun.l.google.com:19302'
        }
      ]
    }

    this.pc = new RTCPeerConnection(pc_config)

    this.pc.onicecandidate = (e) => {
      if (e.candidate) {
        this.sendToPeer('candidate', e.candidate)
      }
    }

    this.pc.oniceconnectionstatechange = (e) => {
      console.log(e)
    }

    this.pc.onaddstream = (e) => {
      this.remoteVideoref.current.srcObject = e.stream
    }

    const constraints = {
      video: true,
      audio: false
    }

    const success = (stream) => {
      window.localStream = stream
      this.localVideoref.current.srcObject = stream
      this.pc.addStream(stream)
    }

    const failure = (e) => {
      console.log('getUserMedia Error: ', e)
    }

    navigator.mediaDevices.getUserMedia(constraints)
    .then(success)
    .catch(failure)
  }

  createOffer = () => {
    console.log('Offer')
    this.pc.createOffer({offerToReceiveVideo: 1})
    .then(sdp => {
      this.pc.setLocalDescription(sdp)
      this.sendToPeer('offerOrAnswer', sdp)
    })
  }
  
  setRemoteDescription = () => {
    const desc = JSON.parse(this.textref.value)
    this.pc.setRemoteDescription(new RTCSessionDescription(desc))
  }

  createAnswer = () => {
    console.log('Answer')
    this.pc.createAnswer({offerToReceiveVideo: 1})
    .then(sdp => {
      this.pc.setLocalDescription(sdp)
      this.sendToPeer('offerOrAnswer', sdp)
    }, e => {})
  }

  addCandidate = () => {
    this.candidate.forEach(candidate => {
      console.log(JSON.stringify(candidate))
      this.pc.addIceCandidate(new RTCIceCandidate(candidate))
    })
  }
  
  render() {
    return (
      <div>
        <video
          style={{
            width: 240,
            height: 240,
            margin: 5,
            backgroundColor: 'black'
          }}
          ref={ this.localVideoref }
          autoPlay>
        </video>
        <video
          style={{
            width: 240,
            height: 240,
            margin: 5,
            backgroundColor: 'black'
          }}
          ref={ this.remoteVideoref }
          autoPlay>
        </video>
        <br />

        <button onClick={this.createOffer}>Offer</button>
        <button onClick={this.createAnswer}>Answer</button>

        <br />
        <textarea style={{ width: 450, height:40 }} ref={ref => { this.textref = ref }} />
      </div>
    )
  }
}  

export default App 

内容的提问来源于stack exchange，提问作者Nathanael Neria