親がアンマウントされた後に子更新を停止する

Question

小さな問題 - 親のマウントが解除された後に子の更新を停止する方法を不明確にします。

現在、私はTextFieldコンポーネントがネストされた 'ビュー'（親）を持っています。

私のTextFieldコンポーネントはTextFieldコンポーネントでonBlurイベント

<input type={this.props.type} name={this.props.name} onBlur={this.handleBlur} ... /> 

2つの関数は、今

hideClear: function() { 
    // to prevent clear button from disappearing when clicking on it 
    if (!this.state.keepFocus) { 
     this.setState({inFocus: false}); 
    } 
}, 
handleBlur: function (e) { 
    e.preventDefault(); 
    this.setState({keepFocus: false}); 
    window.setTimeout(this.hideClear, 200); 
}, 

あるとの入力を実装して、私の入力フィールドにフォーカスがある間時に私の親アンマウント、私は戻って

取得

警告：setState（...）：マウントされたコンポーネントまたはマウントされているコンポーネントのみを更新できます。これは、通常、アンマウントされたコンポーネントに対してsetState（）を呼び出したことを意味します。これはノーオペレーションです。 TextFieldコンポーネントのコードを確認してください。

私は、このシナリオをどのように処理するかについていくつかの良い提案を得ることを期待しています。コンポーネントがすでにアンマウントされたとき

感謝:)エラーが言うように

Answer 1

は、あなたがコンポーネントの状態を更新しようとしている、これはあなたがhandlerBlur()機能を持っているタイマーによるものです。

私は私がわからないんだけど、コンポーネントをアンマウントしますたびので、基本的に更新するsetTimeoutとタイマーを設定、入力がフォーカスを失ったので、onBlurイベントがあなたのhandleBlur()機能を発射トリガーます、と考えたいのですがすでにアンマウントされた後のコンポーネントの状態は、hideClear()関数を介して返されます。

最適な解決策は、コンポーネントがマウント解除された後にsetState（）が呼び出される場所を見つけて修正することです。このような状況は、コンポーネントが何らかのデータを待っていて、データが到着する前にアンマウントされるコールバックのために最も一般的に発生します。理想的には、アンマウントする前に、componentWillUnmountでコールバックをキャンセルする必要があります。

上記の引用は、React developer's blogから抽出されたものです。

この問題を迅速に解決するには、コンポーネントのマウントを解除するときに、後でwindow.clearTimeoutを使用してタイマーをクリアするように、タイマーの識別子をインスタンス変数に格納します。

var MyComponent = React.createClass({ 

    timerId = 0, 

    ... 

    handleBlur: function (e) { 
    e.preventDefault(); 
    this.setState({keepFocus: false}); 
    this.timerId = window.setTimeout(this.hideClear, 200); 
    }, 

    componentWillUnmount: function() { 
    if (this.timerId) 
     window.clearTimeout(this.timerId); 
    }, 

    ... 

}