javascript - 使用 React/Socket.IO 无法读取未定义错误的属性 'emit'

Question

我正在尝试基于 React 教程 https://facebook.github.io/react/docs/tutorial.html 使用 React 和 Socket.Io 构建一个基本的聊天应用程序但不断收到错误“无法读取未定义的属性‘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 和 comment。

您必须在 CommentBox 组件的 handleCommentSubmit 方法中调用 this.socket.emit('message', comment)。 (第二个代码示例中的第 14 行)