React 0.14.0-RC1/React路由器1.0.0-RC1-无法读取空的属性道具

Question

我正在使用Alex Bank的“使用Socket IO和React.js构建一个轮询应用”（Lynda.com），但我正在尝试将其升级为React router 1.0.0-RC1。

我的github存储库可以在这里找到。。。。

问题:

当演讲者登录并创建演示文稿时，将显示一个问题列表。但是，当演讲者单击要向与会者发出的相应问题时，我会收到一个错误：“无法读取null的属性'props'”，它标识了question.js组件中的错误：

ask(question) {
  console.log('this question: ' + JSON.stringify(question));
  this.props.emit('ask', question); <--- Console points to this
}

但我不认为这是问题本身。我相信实际的问题是这个emit没有到达应用程序中的socket.on。

APP.js：

componentWillMount() {
  this.socket = io('http://localhost:3000');
  this.socket.on('ask', this.ask.bind(this));
  ....
}

ask(question) {
  sessionStorage.answer = '';
  this.setState({ currentQuestion: question });
}

我相信它与react路由器相关，但父路由确实有组件{APP}，并且Speaker是子路由，Speaker组件导入问题组件，因此我假设问题组件连接到应用的。

在Alex的项目中，它正在工作，但他使用：

  "react": "^0.13.3",
  "react-router": "^0.13.3", 

有没有可能有人能给我一些关于这个的见解？

非常感谢！

Answer 1

错误消息表示this为空。其原因是反应没有将this绑定到反应元素。也就是说，this在调用ask（问题）方法时不引用元素本身。您只需在构造函数中绑定它：this.ask=this.ask.bind（this）。你最好在官方反应博客上阅读ES6的课堂笔记。

阅读react路由器升级指南也是一个好主意：）

Answer 2

如果您的错误是“无法读取null的属性'props'”，那么情况就是这样：您正试图对null的值调用props。

然而，真正的问题在于这段代码：

ask(question) {
  console.log('this question: ' + JSON.stringify(question));
  this.props.emit('ask', question);
}

addQuestion(question, index) {
  return (
    <div key={ index } className="col-xs-12 col-sm-6 col-md-3">
      <span onClick={ this.ask.bind(null, question) }>{ question.q }</span>
    </div>
  );
}

具体而言，此代码（未包含在问题中）：

javascript prettyprint-override">onClick={ this.ask.bind(null, question) }>

将单击处理程序分配给绑定到null的this.ask版本；这对于React.createClass类型的组件很有效，因为React强制并自动绑定所有组件方法对于组件实例，无论您将什么作为第一个参数传递给. bind（）（因此通常使用null；我认为React实际上会对您大喊大叫）。然而，ES6类的情况并非如此；您实际上是将ask（）中的this设置为null。

正确的说法应该是

onClick={ this.ask.bind(this, question) }>

或者，通常作为匿名函数

onClick={ () => this.ask(question) }>