これは、反要素の反パターン解決の約束と考えられていますか？

Question

アプリの多くの場所では、/search apiを呼び出して結果のIDを選択し、結果が破棄されます。結果は一時的な使用であるため、保存する価値がないと感じます（isLoadingフラグを設定する以外は）アクションをディスパッチすることさえできます。しかし、それは私に反応成分の約束を解決させることになるでしょう、それは悪い習慣かアンチパターンとみなされますか？

例：

componentDidMount() { 
    this.props.doSearch(criterias) 
     .then(res => this.setState({ results: res.results })) 
    } 

Answer 1

はい、これは、ReactJSで知られているアンチパターンです。技術的にthis.isMountedを使ってチェックすることもできますが、これもアンチパターンと見なされます。

問題は、ReactJSが完全なアプリケーションフレームワークになるよう実際には設計されていないことです。実際にはVのみのときにMVCを押しつけるようなものです。最も効果的にするには、他のライブラリ（Reduxは非常に人気があります）は、アプリケーションのデータを格納することができますし、Reactはあなたのためにそれを提示することができます。 Reactを内部のUI状態を実際のUIに変えるライブラリと考えるのが最善です。状態を管理するのは良くありません。

https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.htmlを参照してください。

Answer 2

はい、それが反応におけるアンチパターンです。コンポーネントがアンマウントされた後にthis.setState({ results: res.results })が実行される可能性があります。

最も良い方法は、反応コンポーネントから状態（検索保留中/検索解決済み）を移動することです。 redux + redux-thunkまたはmobxまたはfluxを利用すると便利です。単純なケースでは、キャンセル可能な約束を構築することができます。

const makeCancelable = (promise) => { 
    let hasCanceled_ = false; 

    const wrappedPromise = new Promise((resolve, reject) => { 
    promise.then(
     val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val), 
     error => hasCanceled_ ? reject({isCanceled: true}) : reject(error) 
    ); 
    }); 

    return { 
    promise: wrappedPromise, 
    cancel() { 
     hasCanceled_ = true; 
    }, 
    }; 
}; 

class MyComponent extends Component { 
    componentDidMount() { 
    this.cancellableSearch = makeCancelable(this.props.doSearch()); 
    this.cancellableSearch.then((res) => { 
     this.setState({ results: res.results }); 
    }).catch((reason) => { 
     if (!isCanceled.isCanceled) { 
     console.error('some error occurs', reason); 
     } 
    }) 
    } 

    componentWillUnmount() { 
    this.cancellableSearch.cancel(); 
    } 

    // ... 
} 

キャンセル可能約束コードはここからコピーされます。あなたは約束を解決するときに、コンポーネントがまだ存在することを保証することはできませんのでhttps://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html