web-dev-qa-db-fra.com

Accéder aux PropTypes via le paquet principal React est obsolète

J'utilise redux mais quand je lance mon code, j'ai cette erreur:

L'accès à PropTypes via le package principal React est obsolète. Utilisez plutôt le package prop-types de npm.

J'installe

npm i prop-types -S

mais je j'ai toujours la même erreur.

./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

Comme d'autres l'ont mentionné, si vous avez audité votre propre projet pour PropTypes utilise mais que vous voyez toujours l'avertissement, il provient probablement d'une dépendance en amont. Une des façons de rechercher la cause de cet avertissement consiste à définir un point d'arrêt de débogage où il est consigné, puis à revenir à l'appelant. Voici un exemple d'enregistrement rapide que j'ai fait:

enter image description here

(Une version de meilleure qualité est disponible ici .)

Une fois que vous avez identifié la bibliothèque en question, envisagez de déposer un problème Github (ou mieux encore - un PR!) Pour informer les auteurs du nouvel avertissement.

Dans l'intervalle, il ne s'agit que d'un avertissement en mode dev. Il ne devrait donc pas affecter l'utilisation de votre application en production.

61
bvaughn

Depuis la sortie de React v15.5.0, React.PropTypes est obsolète et a été déplacé dans une autre bibliothèque. Vous devez utiliser npm install prop-types et utilisez les PropTypes à partir de là.

Le code sur ./components/containers/Scorboard.js a l’air parfait, vous avez probablement un React.PropTypes quelque part ailleurs dans votre code.

Une autre option est que certaines dépendances que vous utilisez continuent de l’utiliser à l’ancienne. Vous pouvez essayer de mettre à jour vos dépendances, mais comme cette dépréciation est récente, je doute que chaque bibliothèque ait déjà publié une mise à jour.

Plus de détails sur la dépréciation PropTypes ici .

[~ # ~] met à jour [~ # ~]

Il semble que redux ait mis à jour ses dépendances pour utiliser React v15.5.0 et se débarrasser des avertissements de dépréciation. Il est également corrigé dans les versions v4 et v5.

Requêtes d'extraction pertinentes: # 66 et # 666

16
Yuval

J'ai résolu cet avertissement de cette façon:

PropTypes installés

# npm install -S prop-types

Importer des PropTypes comme ceci

import PropTypes from 'prop-types';

au lieu de faire ceci:

import { PropTypes } from 'react';

8
enam

Veillez à ne pas utiliser React.PropTypes, sample:

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

Veillez également à importer React correctement. J'avais ceci:

import * as React from 'react';

Et devrait être:

import React from 'react';

Cela a corrigé tous mes avertissements.

2
Gerard Brull

enter image description here

Résolu ce problème en exécutant simplement npm install prop-types

0
AKV

Vous pouvez pouvoir réparer en utilisant des versions de mise à niveau

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