web-dev-qa-db-ja.com

メインReactパッケージを介したPropTypesへのアクセスは非推奨です

Reduxを使用していますが、コードを実行すると次のエラーが発生します。

メインReactパッケージを介したPropTypesへのアクセスは非推奨です。代わりに、npmのprop-typesパッケージを使用してください。

インストールする

npm i prop-types -S

しかし、私はまだ同じエラーがあります。

./components/action/article.js

import * as ArticleActionTypes   from '../actiontypes/article';

export const AddArticle = (name, description, prix, image) => {
    return {
        type: ArticleActionTypes.ADD_ARTICLE,
        name, 
        description, 
        prix,
        image
    }
}

export const RemoveArticle = index => {
    return {
        type: ArticleActionTypes.REMOVE_ARTICLE,
        index
    }
}

./components/actiontypes/article.js

export const ADD_ARTICLE = 'article/ADD_ARTICLE';
export const REMOVE_ARTICLE = 'article/REMOVE_ARTICLE';
export const UPDATE_ARTICLE = 'article/UPDATE_ARTICLE';

./components/reducers/article.js

import * as ArticleActionTypes   from '../actiontypes/article';

const initialState = [
    {
        name: 'test',
        description: 'test',
        prix: 'test',
        image: 'url'
    },
    {
        name: 'test',
        description: 'test',
        prix: test,
        image: 'url'
    }
]

export default function Article (state=initialState, action){
    switch(action.type){
        case ArticleActionTypes.ADD_ARTICLE : 
            return [
                ...state,
                {
                    name: action.name,
                    description: action.description,
                    prix: action.prix,
                    image: action.image
                }
            ];
        case ArticleActionTypes.REMOVE_ARTICLE :
            return [
                ...state.slice(0, action.index),
                ...state.slice(action.index +1)
            ] ;
        default: return state;
    }
}

index.js

import React            from 'react';
import { render }       from 'react-dom';
import {Provider}       from 'react-redux';
import {createStore}    from 'redux';

import ArticleReducer   from './components/reducers/article';
import Scoreboard       from './components/containers/Scoreboard';

const store = createStore(
    ArticleReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

render(<Provider>
            <Scoreboard store={store}/>
        </Provider>, document.getElementById('root'));

./components/containers/Scorboard.js

import React                            from 'react';
import {connect}                        from 'react-redux';
import {bindActionCreactors}            from 'redux';
import PropTypes                        from 'prop-types';

class Scoreboard extends React.Component {

    render(){
        return (
            <div>
              Scoreboard
            </div>
        )
    }
}

const mapStateToProps = state => {
    {
        articles :state 
    }
}

Scoreboard.propTypes = {
  articles: PropTypes.array.isRequired
}

export default connect(mapStateToProps)(Scoreboard);
javascriptreactjsreduxreact-proptypes
33
Nedjim DN

他の人が言ったように、PropTypesの使用のために自分のプロジェクトを監査したが、まだ警告が表示されている場合は、上流の依存関係に起因している可能性があります。この警告の原因を追跡する1つの方法は、デバッグブレークポイントをログに記録する場所に設定し、呼び出し元に戻ることです。これが私が作った簡単な録音例です：

enter image description here

（より高品質のバージョンが利用可能です こちら 。）

問題のライブラリを特定したら、Githubの問題（またはもっと良いのはPR！）を提出して、新しい警告を作成者に通知することを検討してください。

一方で、これは開発モードの警告にすぎないため、アプリケーションの本番環境の使用には影響しません。

61
bvaughn

React v15.5.0のリリース以降、React.PropTypesは廃止され、別のライブラリに移動しました。 npm install prop-typesを使用し、そこからPropTypesを使用する必要があります。

./components/containers/Scorboard.jsのコードは完璧に見えますが、おそらくコードのどこかにReact.PropTypesがあります。

別のオプションは、使用しているいくつかの依存関係がまだ古い方法で使用していることです。依存関係を更新することもできますが、この非推奨は非常に新しいため、すべてのライブラリが既に更新をリリースしているとは思えません。

PropTypesの廃止に関する詳細 here 。

UPDATE

ReduxはReact v15.5.0を使用するための依存関係を更新し、廃止予定の警告を削除したようです。 v4およびv5でも修正されています。

関連するプルリクエスト： ＃66 および ＃666

16
Yuval

この警告をこのように解決しました：

インストール済みのPropTypes

# npm install -S prop-types

このようなPropTypesをインポートする

import PropTypes from 'prop-types';

これを行う代わりに：

import { PropTypes } from 'react';

8
enam

React.PropTypesのサンプルを使用しないでください：

MyComponent.propTypes = {
    MyString: PropTypes.string.isRequired
}
2
i am gpbaculio

また、Reactを正しくインポートしてください。私はこれを持っていました：

import * as React from 'react';

そしてする必要があります：

import React from 'react';

これですべての警告が修正されました。

2
Gerard Brull

enter image description here

Npm install prop-typesを実行するだけでこの問題を解決しました

0
AKV

アップグレード版を使用して修正できます

npm install --save [email protected] [email protected]
0
KARTHIKEYAN.A