Невозможно прочитать свойство «emit» неопределенной ошибки с помощью React/Socket.IO

Question

Я пытаюсь создать базовое приложение для чата с использованием React и Socket.Io на основе учебника React https://facebook.github.io/react/docs/tutorial.html, но продолжайте получать сообщение об ошибке «Невозможно прочитать свойство», испускать "неопределенного". Вероятно, это нечто тривиальное, что я забыл, но не могу понять.

Функция, которая вызывает ошибку является:

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) находится в неправильном месте ни this.socket, ни комментарий не определен в вашей CommentForm Компонент.

Вы должны позвонить this.socket.emit('message', comment) в handleCommentSubmit Метод в CommentBox Компонент. (Строка 14 во втором примере кода)