は何で起こることは、あなたが、私は鉱山クラスのインスタンスを作成し、そのインスタンスを持つコンポーネントを反応させている状態を設定見ることができるようにSETSTATEがクラス

Question

のオブジェクトインスタンスで私はこのfiddle

let m = new Mine(); 
this.setState(m,() => { 
    console.log('1:', m instanceof Mine, m.x, m.meth); 
    // => 1: true 123 function meth() {} 
    console.log('2:', this.state instanceof Mine, this.state.x, this.state.meth); 
    // => 2: false 123 undefined 
}); 

を持っていたときに反応します。

私はthis.stateにそのインスタンスを正確に格納することを期待しますが、コンストラクタで設定されているインスタンスプロパティは利用可能ですが、そのインスタンスのクラスメソッドにはアクセスできません。

フィドルのテストでは、this.stateがクラスMineのインスタンスではないことが示されています。

誰かが何が起こっているのか、あるいはこの意図しない振る舞いを理解していますか？

Answer 1

さらに調査した結果、その理由がわかりました。

reactの_processPendingState関数はObject.assignを使用して新しい状態を設定します。したがって、ターゲットオブジェクトは新しいオブジェクト（setStateに渡されるものとは異なる）なので、新しい状態は "私のクラス。

Object.assignは独自の列挙可能なプロパティをソースからターゲットにコピーするだけなので、新しい状態にもクラスメソッドはありません。

フィドルに私たちはラインを交換する場合

...と

let m = new Mine(); 

...

let m = {x: 123}; 
Object.defineProperty(m, 'meth', { 
    enumerable: false, 
    get() { return function() {}; } 
}); 

我々はまだ結果の状態の「メタ」性質を持っていません。 "m"が "meth"プロパティを所有していても、それは列挙できません。

Answer 2

このような場合はreplaceStateを使用してください。

Answer 3

最善の解決策は、矢印の関数としてメソッドを表面化している：

class Blah { 
    constructor() { 
    // no definition here for surfacedMethod! 
    } 

    surfacedMethod =() => { 
    // do something here 
    } 

} 

次にあなたがSETSTATEで、このクラスのインスタンスを設定し、それらがインスタンスに設定された属性であるかのように彼らの方法を使用することができます。

// other component innards 
this.setState(state => ({blah: new Blah()})) 

// later 
this.state.blah.surfacedMethod(); // this will now work