昨日に引き続き、ESLint を導入した際に発生したエラーの対処方法についてです。
React Native のプロジェクトに ESLint を導入し、実行したところ、タイトルにある通り「’○○’ is missing in props validation」というエラーが発生しました。
コードの修正にあたり、参考にさせていただいた記事はこちら。
javascript – React eslint error missing in props validation – Stack Overflow
https://stackoverflow.com/questions/38684925/react-eslint-error-missing-in-props-validation
どうやら prop-types を使って親コンポーネントから子コンポーネントに値を渡しているのですが、一部の値でその定義を記述し忘れているのが原因のようでした。
そのため、エラーが発生している箇所のコードを修正していったのですが…よく見ると、React Navigation のコードの this.props.navigation.push("mypage"); のコードもエラーになっていることが判明しました。
これを全部修正するのは面倒すぎる…!ということで、このエラーは無視することにしました。
このエラーを無視するように設定するには、.eslintrc.js ファイルに下記を追加するだけです。
module.exports = {
......
"rules": {
"react/prop-types": "off",
},
......
}
rules の項目に "react/prop-types": "off" を追加します。
この状態で、ESLint を実行すると、prop-types に関連したエラーは表示されなくなりました!
ESLint は便利なのですが、ここまで厳密にしなくても…と思う時があるので、その際は様子を見ながら、不要なチェックは無効にしてしまいましょう。
以上、ESLint の実行時に「’○○’ is missing in props validation」エラーが表示されるときの対処方法についてでした。
ご参考になれば幸いです。