Javascript 不推荐通过主React包访问PropTypes

我正在使用redux，但运行代码时出现以下错误：

不推荐通过主React包访问PropTypes。使用 道具类型从npm包取而代之

我安装

npm i道具类型-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
    }
}

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

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;
    }
}

./components/actiontypes/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
    }
}

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

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;
    }
}

/部件/减速器/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
    }
}

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

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'));

从“React”导入React；
从'react dom'导入{render}；
从'react redux'导入{Provider}；
从“redux”导入{createStore}；
从“./components/reducers/article”导入ArticleReducer；
从“./组件/容器/记分板”导入记分板；
const store=createStore(
第二条：，
窗口.\uuuuRedux\uDevTools\uuuu扩展&&window.\uuuuRedux\uDevTools\uuuu扩展（）
)
渲染(
，document.getElementById（'root'）；

/组件/容器/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);

从“React”导入React；
从'react redux'导入{connect}；
从'redux'导入{bindActionCreactors}；
从“道具类型”导入道具类型；
类记分板扩展React.Component{
render（）{
返回(
记分牌
)
}
}
常量mapStateToProps=状态=>{
{
条款：国家
}
}
Scoreboard.propTypes={
文章：PropTypes.array.isRequired
}
导出默认连接（mapStateToProps）（记分板）；

自从React v15.5.0 React.PropTypes发布以来，React.PropTypes已被弃用，并已移动到另一个库中。您应该使用

npm安装道具类型

并从那里使用道具类型

./components/containers/Scorboard.js上的代码看起来非常好，您的代码中可能还有一个

React.PropTypes

另一个选择是，您正在使用的某些依赖项仍然以旧的方式使用它。您可以尝试更新您的依赖项，但由于这种不推荐是全新的，我怀疑每个库都已经发布了更新

有关PropTypes弃用的更多详细信息

更新

看起来redux已经更新了它的依赖项，以使用React v15.5.0，并删除了弃用警告。它在v4和v5中也是固定的

---

相关的拉取请求：和

如其他人所述-如果您已经审核了自己的项目的

PropTypes

使用情况，但仍然看到警告-它可能来自上游依赖项。跟踪此警告原因的一种方法是，在记录该警告的位置设置调试断点，然后返回调用方。下面是我录制的一个快速示例：

（可提供更高质量的版本。）

一旦你确定了所讨论的图书馆，考虑提交一个GITHUB问题（或者更好的是PR）来通知作者新的警告。

---

同时，这只是一个开发模式警告，因此不应影响应用程序的生产使用。

请确保不要使用React.PropTypes，示例：

MyComponent.propTypes = {
    MyString: PropTypes.string.isRequired
}

---

我这样解决了这个警告：

已安装的支柱类型

#npm安装-S道具类型

像这样导入proptype

从“道具类型”导入道具类型

而不是这样做：

从'react'导入{PropTypes}

通过简单地运行
npm安装道具类型
也请确保正确导入。我有这个：

import * as React from 'react';

应该是：

import React from 'react';

这修复了我的所有警告。
您可以使用升级版本修复

npm install --save react@15.4.0 react-dom@15.4.0

试试这个：，使用
npm安装proptypes安装它，我想你应该使用其他npm模块。也可以查看这个博客：@MayankShukla，正如我在这里看到的，OP使用的包是正确的，也许你有一些旧版本中使用prop类型的库way@niba是的，您可能正在使用仍然以旧方式使用propTypes的库。您可以删除node_modules文件夹并安装一个包
npm install-g npm check updates
，然后运行
npm check updates-u
和
npm install
，这将安装您提供的每个包的最新版本。如果警告仍然存在，您可以恢复到旧版本的react，直到每个包的更新可用为止，这可能是由依赖项引起的。我相信，
react-redux
也在使用
PropTypes
。是的，这很可能是由依赖性引起的。给他们几周时间更新，暂时忽略这个警告。非常好。但如果我用的是webpack，我能猜出来吗？在本例中，所有源代码都来自“bundle.js”，我找不到有问题的模块，因此您必须在调用堆栈中的某个点上浏览源代码。通常有一个提示（一些公共方法名或一些硬编码字符串）可以帮助您缩小范围。FWIW，我知道，在第一个警告的堆栈跟踪中，您还可以看到第104行的广播。然而，情况并非总是如此——也许此时代码已经打包好了。在检查不熟悉的代码时，设置断点可以为您提供更多的上下文。感谢您提供了很好的答案，但这似乎不必要的尴尬：-（真的有很好的理由解释为什么这个警告不能像其他任何一个明智的警告一样，帮助你准确地指出不推荐使用的地方吗？这里有什么问题吗？假设你从
PropTypes
包而不是React导入了
PropTypes
。。谢谢！我在使用了npm
prop之后仍然有一个警告。）-类型
package，它出现在有人使用的代码中
React.PropTypes
。用
PropTypes
（从npm包导入）替换它修复了问题。