TypeError：尝试在React.js中的父子之间使用回调时，undefined不是对象（评估'this.props'）

Question

尝试将操作从子元素发送到其父元素时，我目前遇到问题。 单击某个线程以将该线程标记为活动线程时，我想更改MessagingContainer的状态。 因此，当单击线程（ ThreadElement ）时，它需要发送到其父级（ ThreadList ），然后该父级（ ThreadList ）发送到其父级（ MessagingContainer ），以便Messaging Container更新状态。

首先，这是正确的方法吗：RE：状态和修改状态？

其次，我似乎无法正常工作。 我收到了TypeError: undefined is not an object (evaluating 'this.props')的持续错误TypeError: undefined is not an object (evaluating 'this.props') 。

我省略了下面代码的消息部分，因此只有线程可见。

var ThreadElement = React.createClass({
  render: function() {
    console.log('ThreadElement');
    console.log(this.props);
    var threadParticipantsNames = this.props.thread.participants.map(function(participant) {
      var participantName;
      if (participant.user) {
        participantName = participant.user.metadata.first_name;
      } else {
        participantName = 'Anonymous';
      }

      return (
        <span key={participant.id}>
          {participantName}
        </span>
      );
    });
    return (
      <div key={this.props.thread.id} onClick={this.props.handleActiveThreadChange}>
        {threadParticipantsNames}
      </div>
    );
  }
});


var ThreadList = React.createClass({
  render: function() {
    console.log('ThreadList');
    console.log(this.props);
    var threadNodes = this.props.threads.map(function(thread) {
      return (
        <ThreadElement thread={thread} key={thread.id} handleActiveThreadChange={this.props.handleActiveThreadChange} />
      );
    });
    return (
      <div className="threadList">
        {threadNodes}
      </div>
    );
  }
});


var MessagingContainer = React.createClass({
  handleActiveThreadChange: function() {
    console.log('MessagingContainer handleActiveThreadChange called.');
  },
  getInitialState: function() {
    return {
      activeThread: 0,
      data: threadsJSON
    };
  },
  render: function() {
    console.log('MessagingContainer');
    console.log(this.props);
    return (
      <div>
        <ThreadList threads={this.state.data.threads} handleActiveThreadChange={this.handleActiveThreadChange} />
        <MessageList thread={this.state.data.threads[this.state.activeThread]} />
      </div>
    );
  }
});

如果有帮助，控制台将提供以下输出。 MessagingContainer和ThreadList console.log（）似乎可以正常工作，这是否表明问题出在ThreadElement类中？

[Log]   MessagingContainer
[Log]   {}
[Log]   ThreadList
[Log]   {threads: Array, handleActiveThreadChange: function}
[Error] TypeError: undefined is not an object (evaluating 'this.props')

谢谢！

Answer 1

从我所看到的，我认为问题是ThreadList组件中的.map函数。 由于您位于map函数中， this您的上下文已更改。 您应该使用.bind或本地that = this变量来保存正确的上下文：

var threadNodes = this.props.threads.map(function(thread) {
  return (
    <ThreadElement thread={thread} key={thread.id} handleActiveThreadChange={this.props.handleActiveThreadChange} />
  );
}).bind(this);

要么

var that = this;
var threadNodes = this.props.threads.map(function(thread) {
  return (
    <ThreadElement thread={thread} key={thread.id} handleActiveThreadChange={that.props.handleActiveThreadChange} />
  );
});