React：このset.setStateを空の関数に設定すると、アンマウント後の状態の更新を防ぐことはできますか？

Question

ネットワークコールバックが、アンマウントされたコンポーネントのsetState（）を試みて、このno-opに関するデフォルトのコンソール警告を受け取るという問題に直面しています。

なぜ私はアンマウントが起こったのかを追跡することはできませんでしたが、componentWillUnmount（）に関数を何も設定しないように提案しました。それはうまくいかず、私はthis.setStateを何も設定しないようにテストしました。下記参照。

エラーが表示されなくなりましたが、それが有効な解決策であるかどうか尋ねたいと思います。ここでは、コード：

componentDidMount() { 
    this.fetchLogItems(10, 'recentChanges'); 
    } 

    componentWillUnmount() { 
    this.setState =() => {}; 
    } 

    fetchLogItems = (limit, stateRef) => { 
    let tmpObj = {}; 
    base.fetch('_changelogs', { 
     context: this, 
     then(data) { 
     tmpObj[stateRef] = {...data} 
     tmpObj.loading = false; 
     this.setState({...tmpObj}) 
     }, 
     catch(err){console.error(err)} 
    }); 
    }; 

Answer 1

つのオプション：

• はあなたにも使用しているものは何でもヘルパーは「デストラクタ」（キャンセルの使用を許可していることを確認してください、と私は間違いなく「キャンセルの使用を好みます「）
• ない場合、その後、あなたが紹介して、 『キャンセル『 『破壊』、または 『クリーンアップ』』あなたのライブラリーは、いくつかのために可能な場合は、あなたのクラスに

を』フラグを、そしてあなたは、単に行うことがあります。

componentWillUnmount() { 
    base.cancelFetch(); // or something similar. 
} 

そうしないと、あなたはあなたのコンポーネントにクラスプロパティを導入することができるかもしれません。おそらくそれをisUnmountedと名付ける。 componentWillUnmountでは、this.isUmountedをtrueに設定します。 this.setStateのコールをifの文で囲んでください。isUnmountedがfalseであるかどうかを確認し、そうであればthis.setStateと呼ぶことができます。これは実際には非常に一般的なパターンです。

「feel」と思われるかもしれませんが、実際には、このパターンはReact開発者の間では慣用的なようです。そうでなければ、少なくともそれはあなたと同様の問題に対する実用的な解決策です。

constructor() { 
    // HERE 
    this.isUmounted = false; 
} 

componentDidMount() { 
    this.fetchLogItems(10, 'recentChanges'); 
} 

componentWillUnmount() { 
    // HERE 
    this.isUmounted = true; 
} 

fetchLogItems = (limit, stateRef) => { 
    let tmpObj = {}; 
    base.fetch('_changelogs', { 
    context: this, 
    then(data) { 
     tmpObj[stateRef] = {...data} 
     tmpObj.loading = false; 
     // WRAP THE `this.setState` here. 
     if (!this.isUnmounted) { 
     this.setState({...tmpObj}) 
     } 
    }, 
    catch(err){console.error(err)} 
    }); 
}; 

ただし、私は、キャンセルをサポートするライブラリとヘルパーの使用を推奨します。間違いなくクリーンアップのレベルは保証されています。キャンセルがなければ、メモリリークが発生する危険性があります。