javascript - Facebook react : Invariant Violation and elements than didn't mount automatically

Question

我正在通过做一个小例子来学习 Facebook React。 我决定检查我对 this 绑定(bind)的了解是否正确，所以我创建了三个 React.class，其中可变状态在父级中，中间只将回调传递给 children 来操纵它。

基本结构:

- MainFrame (states here)
  - FriendBox (only pass the callbacks for change states to Friend)
    -Friend

请注意，我可以使用 transferThisProp 但实际上我更喜欢“手动”制作它。

FriendBox 渲染包含这个:

var allFriends = this.props.friends.map((function (f) {
  return(
    <Friend key = {f.id}
            name = {f.name}
            select = {this.props.select}
    />
  )
}).bind(this))  

friend 渲染包含这个:

return(
  <div className="friend">
    {this.props.name}
    <a href="" onClick={this.props.select(this.props.key)}>
      select
    </a>
  </div>
)

运行我的代码时，我收到以下消息:

MainFrame.sendToFriendH:
  Invariant Violation: receiveComponent(...):
  Can only update a mounted component. react.js:7276
Uncaught Error: Invariant Violation:
  receiveComponent(...): Can only update a mounted component. 

有趣的是，当使用 chrome 的 react 扩展时，我可以检查虚拟 DOM 是否正常并且绑定(bind)是否正常。除了第一个 Friend 元素的 Child 组件说 _lifeCycleState: "UNMOUNTED"

之外，一切看起来都很好

这让我觉得我犯了一个错误，底部的 child 没有被渲染和安装。 所有代码都失败了，但我不知道确切原因。 谁能告诉我为什么该元素没有自动挂载，我该如何解决？

完整代码:http://jsfiddle.net/RvjeQ/

Answer 1

当你写作时

onClick={this.props.select(this.props.key)}

您正在立即调用 this.props.select 处理程序并将其result 设置为 onClick 处理程序。我猜您想改用部分应用程序，您可以使用箭头函数来完成:

onClick={(e) => this.props.select.bind(this.props.key, e)}

如果你不关心事件参数，你可以跳过它。

您也可以像这样使用 .bind():

onClick={this.props.select.bind(null, this.props.key)}