Question

我已经在js文件中加载了peer js，当我在浏览器的控制台行输入Peer时，它会向我显示该对象。但是，当我加载页面时，我得到： Chat.jsx：18未捕获的ReferenceError：Peer未定义

export default class Chat extends React.Component{

constructor(){
 super();   

             // Create a Peer instance
        window.peer = new Peer({  // the error is on this line
        key: 'thisismykey',  // get a free key at http://peerjs.com/peerserver
        debug: 3,
        config: {'iceServers': [
                { url: 'stun:stun.l.google.com:19302' },
                { url: 'stun:stun1.l.google.com:19302' },
            ]}
       });
    }

当我将Peer键入控制台时，我得到：

  Function Peer(id, options) {
  if (!(this instanceof Peer)) return new Peer(id, options);
  EventEmitter.call(this);
  // Deal with overloading
  if (id && id.constructor == Object) {
  optio… // etc

我尝试过使用componentOnMount，但也会出现同样的问题。

这是由于我正在考虑加载.js文件。但我在索引文件中加载它与正在运行的所有其他.js文件相同。

<script src="assets/js/peer.js"></script>.

我知道有一种不同的加载文件的方法，但其他工作方式，所以我想知道为什么不这样做。

有没有办法让代码在组件准备就绪时运行。

当我只是添加一个按钮来调用//创建一个Peer实例代码时，它工作正常，整个过程都有效。所以js确实在我正在思考的错误时间加载。

谢谢！

Answer 1

因为您正在使用窗口对象（window.peer），所以应该等待DOM渲染。

来自React Docs：

componentDidMount在安装组件后调用，并具有DOM表示。这通常是您附加通用DOM事件的地方。

您可能有充分的理由在标记中加载脚本。如果你不这样做，你可能会把它包括在你的包中（see guide）。

meteor npm install --save peer

然后

import peer from 'peer';

在您使用peer的每个组件中

然后像（window.peer删除）：

export default class Chat extends React.Component{

constructor(){
  super();   
  this.state {
        peer = new Peer({
          key: 'thisismykey',  // get a free key at http://peerjs.com/peerserver
          debug: 3,
          config: {'iceServers': [
            { url: 'stun:stun.l.google.com:19302' },
            { url: 'stun:stun1.l.google.com:19302' },
        ]}
    };
}

componentWillMount() {
    this.state.peer.on('open', (id) => {
        console.log('My peer ID is: ' + id);
        this.setState({
            my_id: id,
            initialized: true
        });
    });

    this.state.peer.on('connection', (connection) => {
        console.log('someone connected');
        console.log(connection);

        this.setState({
            conn: connection
        }, () => {
            this.state.conn.on('open', () => {
                this.setState({
                    connected: true
                });
            });

            this.state.conn.on('data', this.onReceiveData);
        });
    });
}

render() {
    var result;
    if(this.state.initialized){
        result = (
            <div>
                <div>
        Your PeerJS ID: <strong className="">{this.state.my_id}</strong>
                </div>
                {this.state.connected ? 'Your Connected' : 'Your Not Connected'}
            </div>
        );
    } else {
        result = <div>Loading...</div>;
    }

    return result;
}

未经测试

Meteor React Uncaught ReferenceError：Peer未定义

1 个答案: