質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

7579閲覧

React v16.9以上の非推奨 componentWillReceiveProps について

sasayaka_p

総合スコア20

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/04/11 05:19

編集2020/04/11 05:21

■質問
画像の通りエラーがでておりまして,内容は
componentWillReceivePropsは非推奨だから名前を変えてください。と書いてます。
イメージ説明

ErrorMessage

1react-dom.development.js:88 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details. 2 3* Move data fetching code or side effects to componentDidUpdate. 4* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state 5* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder. 6 7Please update the following components: DateInput

こちらの対策としまして、React公式ドキュメントより

npx react-codemod rename-unsafe-lifecycles

を実行すれば良いと書かれていたので実行すると
UNSAFE_componentWillReceivePropsに変わりましたが、この警告文が消えません。

こちらの原因は何かわかる方いらっしゃるでしょうか?

現在のライブラリ情報はこちらになります
Package.json

package.json

1{ 2 "name": "hanematio", 3 "version": "1.0.0", 4 "main": "index.js", 5 "license": "MIT", 6 "scripts": { 7 "build:dev": "webpack", 8 "build:prod": "webpack -p --env production", 9 "dev-server": "webpack-dev-server", 10 "test": "jest --config=jest.config.json", 11 "start": "node server/server.js", 12 "heroku-postbuild": "yarn run build:prod" 13 }, 14 "dependencies": { 15 "@babel/cli": "^7.8.4", 16 "@babel/core": "^7.9.0", 17 "@babel/plugin-proposal-class-properties": "^7.8.3", 18 "@babel/plugin-proposal-object-rest-spread": "^7.9.5", 19 "@babel/plugin-transform-modules-commonjs": "^7.9.0", 20 "@babel/preset-env": "^7.9.5", 21 "@babel/preset-react": "^7.9.4", 22 "@material-ui/core": "^4.9.9", 23 "babel-core": "^7.0.0-bridge.0", 24 "babel-jest": "^25.3.0", 25 "babel-loader": "^8.1.0", 26 "build": "^0.1.4", 27 "css-loader": "3.5.1", 28 "dev-server": "^0.1.0", 29 "express": "^4.17.1", 30 "extract-text-webpack-plugin": "4.0.0-beta.0", 31 "firebase": "^7.14.0", 32 "moment": "2.24.0", 33 "node-sass": "^4.13.1", 34 "normalize.css": "^8.0.1", 35 "numeral": "^2.0.6", 36 "react": "^16.9.0", 37 "react-addons-shallow-compare": "15.6.2", 38 "react-dates": "21.8.0", 39 "react-dom": "^16.9.0", 40 "react-modal": "3.11.2", 41 "react-redux": "7.2.0", 42 "react-router-dom": "^5.1.2", 43 "redux": "^4.0.5", 44 "sass-loader": "^8.0.2", 45 "style-loader": "1.1.3", 46 "uuid": "3.1.0", 47 "validator": "13.0.0", 48 "webpack": "^4.42.1", 49 "webpack-cli": "^3.3.11", 50 "yarn": "^1.22.4" 51 }, 52 "devDependencies": { 53 "enzyme": "^3.11.0", 54 "enzyme-adapter-react-16": "^1.15.2", 55 "enzyme-to-json": "^3.4.4", 56 "jest": "^25.3.0", 57 "raf": "^3.4.1", 58 "react-test-renderer": "16.13.1", 59 "webpack-dev-server": "^3.10.3" 60 } 61} 62

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

使っているライブラリの内部でcomponentWillReceivePropsが使われている、という可能性が考えられます。

バージョンアップを待つか無視するかになるかと思います。

投稿2020/04/11 05:56

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasayaka_p

2020/04/11 06:06

ありがとうございます。 今は一時的にバージョンを下げて対応してエラー消しました yarn add react-dom@16.8.3 react@16.8.3
guest

0

一時的にReactとReact-DOMのバージョンを下げて警告メッセージを消しました。

yarn add react-dom@16.8.3 react@16.8.3

投稿2020/04/11 06:07

sasayaka_p

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問