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

Question

我試圖使用基於React教程https://facebook.github.io/react/docs/tutorial.html的React和Socket.Io構建一個基本的聊天應用程序，但不斷收到錯誤「無法讀取屬性」發出'未定義'。這可能是我忽視的一些微不足道的東西，但我無法弄清楚。

觸發錯誤的功能是：

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定義錯了地方零件。

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