javascript Facebook React：不变违规和元素没有自动安装
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21554584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook React: Invariant Violation and elements than didn't mount automatically
提问by user1050817
I am learning Facebook React by doing a small example.
I decided check if my knowledge about the thisbinding was ok so I created three React.classwhere the mutable states are in the parent and the middle only pass the callbacks to the children to manipulate it.
我正在通过做一个小例子来学习 Facebook React。我决定检查我对this绑定的了解是否正确，所以我创建了三个React.class可变状态在父级中，中间只将回调传递给子级来操作它。
Basic structure:
基本结构：
- MainFrame (states here)
- FriendBox (only pass the callbacks for change states to Friend)
-Friend
Notice than I could use transferThisPropbut actually I preferred made this "manually".
请注意我可以使用transferThisProp但实际上我更喜欢“手动”制作。
FriendBox render contains this:
FriendBox 渲染包含以下内容：
var allFriends = this.props.friends.map((function (f) {
return(
<Friend key = {f.id}
name = {f.name}
select = {this.props.select}
/>
)
}).bind(this))
Friend render contains this:
朋友渲染包含以下内容：
return(
<div className="friend">
{this.props.name}
<a href="" onClick={this.props.select(this.props.key)}>
select
</a>
</div>
)
When running my code I get the following message:
运行我的代码时，我收到以下消息：
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.
The interesting part is that when using the react extension for chrome I can check that the virtual DOMis well and the bindings are ok. Everything looks fine except than the Child component for the first Friendelement says _lifeCycleState: "UNMOUNTED"
有趣的部分是，当使用 chrome 的 react 扩展时，我可以检查虚拟DOM是否良好并且绑定是否正常。除了第一个Friend元素的 Child 组件说之外，一切看起来都很好_lifeCycleState: "UNMOUNTED"
This made me think than I am doing a mistake where the bottom child is not being rendered and mounted. All the code fails but I don't know exactly why. Can anyone can tell me why the element is not automatically mounted and how can I fix it?
这让我觉得我犯了一个错误，即底部的孩子没有被渲染和安装。所有代码都失败了，但我不知道为什么。谁能告诉我为什么该元素没有自动安装，我该如何解决？
Full Code: http://jsfiddle.net/RvjeQ/
完整代码：http: //jsfiddle.net/RvjeQ/
回答by Sophie Alpert
When you write
当你写
onClick={this.props.select(this.props.key)}
you're calling the this.props.selecthandler immediately and setting its resultas the onClick handler. I'm guessing you want to instead do a partial application, which you can do using an arrow function:
您this.props.select立即调用处理程序并将其结果设置为 onClick 处理程序。我猜你想要做一个部分应用程序，你可以使用箭头函数来做：
onClick={(e) => this.props.select.bind(this.props.key, e)}
If you don't care about the event arg, you can skip it.
如果您不关心事件 arg，则可以跳过它。
You can also use .bind()like so:
你也可以.bind()像这样使用：
onClick={this.props.select.bind(null, this.props.key)}
回答by Thank you
For what it's worth, you don't have to do
对于它的价值，你不必做
this.props.friends.map((function(){ ... }).bind(this));
The second argument to Array.prototype.mapallows you to set the context for the callback function. Use this instead
Array.prototype.map的第二个参数允许您设置回调函数的上下文。改用这个
this.props.friends.map(function(f){ ... }, this);
You could also use an Arrow Functionthat has lexical scope
您还可以使用具有词法范围的箭头函数
this.props.friends.map(f =>
<Friend key = {f.id}
name = {f.name}
select = {this.props.select}
/>
)
Also, when you're working with complex props, you can do things like
此外，当您使用复杂的道具时，您可以执行以下操作
var props = {
key: f.id,
name: f.name,
select: this.props.select
};
<Friend {...props} />
