使用React / Socket.IO無法讀取未定義錯誤的屬性'emit'

Question

我正在嘗試使用React和Socket.Io構建一個基本的聊天應用程序，基於React教程https://facebook.github.io/react/docs/tutorial.html但不斷收到錯誤“無法讀取屬性'emit'未定義的“。 這可能是我忽略的微不足道的事情，但我無法弄明白。

觸發錯誤的函數是：

    handleSubmit: function (e) {
    e.preventDefault();
    var author = this.state.author.trim();
    var text = this.state.text.trim();
    if (!text || !author) {
        return;
    }
    this.props.onCommentSubmit({ author: author, text: text });
    this.setState({ author: '', text: '' });
    this.socket.emit('message', comment);
},

完整的代碼是

import React, { Component, PropTypes } from 'react';
import ReactDom from 'react-dom';
import io from 'socket.io-client'

/********************************************************************************************************/

var CommentBox = React.createClass({

    getInitialState: function () {
        return { data: [] };
    },

    handleCommentSubmit: function (comment) {
        this.setState({ data: [comment, ...this.state.data] });
    },

    componentDidMount: function (data) {
        this.socket = io.connect();
        this.socket.on('message', function (comment) {
            this.setState({ data: [comment, ...this.state.data] });
        });
    },

    render: function () {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data={this.state.data} />
                <CommentForm onCommentSubmit={this.handleCommentSubmit} />
            </div>
        );
    }
});

/********************************************************************************************************/

var CommentList = React.createClass({
    render: function () {
        var commentNodes = this.props.data.map(function (comment) {
            return (
                <Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
            );
        });
        return (
            <div className="commentList">
                {commentNodes}
            </div>
        );
    }
});

/********************************************************************************************************/

var CommentForm = React.createClass({

    getInitialState: function () {
        return { author: '', text: '' };
    },

    handleAuthorChange: function (e) {
        this.setState({ author: e.target.value });
    },

    handleTextChange: function (e) {
        this.setState({ text: e.target.value });
    },

    handleSubmit: function (e) {
        e.preventDefault();
        var author = this.state.author.trim();
        var text = this.state.text.trim();
        if (!text || !author) {
            return;
        }
        this.props.onCommentSubmit({ author: author, text: text });
        this.setState({ author: '', text: '' });
        this.socket.emit('message', comment);
    },

    render: function () {
        return (
            <div>
                <form className='commentForm' onSubmit={this.handleSubmit}>
                    <input type='text' placeholder='Name' value={this.state.author} onChange={this.handleAuthorChange} />
                    <input type='text' placeholder='Enter Message' value={this.state.text} onChange={this.handleTextChange} />
                    <input type='submit' value='Post' />
                </form>
            </div>
        );
    }
});

/********************************************************************************************************/

var Comment = React.createClass({
    render: function () {
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                {this.props.children}
            </div>
        );
    }
});

/********************************************************************************************************/
ReactDom.render(
    <CommentBox />,
    document.getElementById('container')
);

Answer 1

對this.socket.emit('message', comment)的調用位於錯誤的位置，在CommentForm組件中既沒有定義this.socket也沒有定義注釋。

您必須在CommentBox組件的handleCommentSubmit方法中調用this.socket.emit('message', comment) 。 （第二個代碼示例中的第14行）