Reactをプロジェクトの開発に使用しているのですが、最近のバージョンアップによりcomponentWillMountをはじめとする**いくつかのlifecycle methodsがDeprecatedとなってしまいました。**そして、それに伴ってメソッドの書き換えを行っています。
componentWillMountについては、ほぼほぼcomponentDidMountに書き換えることで対処できたのですが、componentWillReceivePropsの書き換えで非常に困ったことが起きています。
例えば以下のコードがあるとします。
componentWillReceiveProps(nextProps) { if (nextProps.propName === this.props.propName) { this.setState({ stateName: true }) } this.method() }
このようなコードを新しいライフサイクルメソッドとして推奨されているstatic getDerivedStateFromPropsで書き換え用としているのですが、どう頑張っても上手にできません。
というのも
- getDerivedStateFromPropsはstaticメソッドなのでthisへのアクセスが無い(this.propsが取得できず、propsの比較が出来ない)
- getDerivedStateFromPropsは引数として(nextProps, prevState)を取り、prevPropsとの比較が出来ない
- this.propsをstateにコピーしてprevStateからアクセスする方法はバグになる可能性が高く非推奨になっている
からです。
かといって、**componentDidUpdateを使おうとするとthis.setStateで無限ループに陥ってしまいます。**useEffect()でも同様なので結局使えません。
色々調べてみて、以下の解決策(?)を見つけたのですが説明が十分でなく実際どのように使うのかいイマイチつかめません(下のリンクに関しては結局、stateにpropsをコピーしているようにすら見えます)。
Recommendation: fully controlled component
State derived from props/state
もしこれまでcomponentWillReceivePropsで行ってきたことを他の方法で出来るならご教授願いたいです。
また、開発側がstatic getDerivedStateFromPropsというpropsの比較ができないメソッドを作り上げたことが改悪にしか感じられないのですが、その点に関してもご意見を伺いたいです(一応、公式的には引数にprevPropsを入れるとややこしくなるから、とのことみたいですが…)。稚拙な文章ですが、どうぞよろしくお願いします。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/22 05:13
2019/12/22 08:59
2019/12/22 09:21
2019/12/26 03:03