web-dev-qa-db-ja.com

Facebook React：自動的にマウントされなかったものよりも不変の違反と要素

私はFacebookを学んでいますReact小さな例を実行します。thisバインディングに関する知識が問題ないかどうかを確認することにしたので、3つのReact.classを作成しました。は親にあり、中央はそれを操作するために子にコールバックを渡すだけです。

基本構造：

- 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))

フレンドレンダリングにはこれが含まれています：

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が正常で、バインディングに問題がないことを確認できることです。最初のFriend要素は_lifeCycleState: "UNMOUNTED"を示します

これは、一番下の子がレンダリングされてマウントされていないという間違いをしているよりも、私に考えさせられました。すべてのコードが失敗しますが、正確な理由はわかりません。要素が自動的にマウントされない理由と、それを修正するにはどうすればよいですか？

完全なコード： http://jsfiddle.net/RvjeQ/

javascriptreactjs
12
user1050817

あなたが書くとき

_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)}
_
19
Sophie Alpert

それが価値があることのために、あなたはする必要はありません

this.props.friends.map((function(){ ... }).bind(this));

Array.prototype.map の2番目の引数を使用すると、コールバック関数のコンテキストを設定できます。代わりにこれを使用してください

this.props.friends.map(function(f){ ... }, this);

字句スコープを持つ 矢印関数 を使用することもできます

this.props.friends.map(f =>
  <Friend key = {f.id}
          name = {f.name}
          select = {this.props.select}
  />
)

また、複雑な小道具を使用している場合は、次のようなことができます。

var props = {
  key:    f.id,
  name:   f.name,
  select: this.props.select
};

<Friend {...props} />
3
user633183