浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】ワーニング「Function components do not support contextType.」が発生する

ワーニングなので、今のところ動作には問題は起こっていなかったのですが、今後変な挙動を引き起こしても嫌なので、今の内から対処することにしました。
エラーメッセージは、タイトルにもある通り「Function components do not support contextType.」で、「関数コンポーネントはcontextTypeをサポートしていません。」とのことでした。

検索したところ、下記の記事がヒットしました。

Function components do not support contextType. · Issue #14061 · facebook/react · GitHub
https://github.com/facebook/react/issues/14061

 

上記記事によると、contextType を代入している行と、export default withRouter() の行を別の書き方に変更すればいいとのことでした。

記事にあった変更前のコードがこちら。
対象の記述のみ抜粋しています。

RegisterModal.contextType = ErrorContext;
export default withRouter(RegisterModal);

上記のコードを、下記のように書き直すとワーニングが解消されるらしいです。

const WrappedClass = withRouter(RegisterModal);
WrappedClass.WrappedComponent.contextType = ErrorContext;
export default WrappedClass

一部を書き換えつつ、コードを修正して実行してみたところ、私の環境ではワーニングが発生しなくなりました!
ただ、何故これでワーニングが解消されるのかはよく分かっていないので、もう少し記事を読み込んでおきたいと思います…。

なお、別の記事では、contextType を代入している行と、export default の行を入れ替えて、先に export default withRouter() を記述する方法も紹介されていましたが、私の環境ではワーニングは解消されませんでした。

 

以上、React で 「Function components do not support contextType.」ワーニングが発生した時の対処方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)