首页 文章

不推荐通过主React包访问PropTypes

提问于
浏览
32

我正在使用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);

7 回答

  • 8

    正如其他人所提到的那样 - 如果您已经审核了自己的项目 PropTypes ,但是您可能来自上游依赖项 . 您可以通过设置调试断点来查找此警告的原因的一种方法是's logged and then stepping back to the caller. Here'是我做的快速示例录制:

    enter image description here

    (可提供更高质量的版本here . )

    一旦您确定了相关库,请考虑提交Github问题(或者更好的PR - !)以通知作者新警告 .

    同时,这只是一个开发模式警告,所以它不应该影响应用程序的 生产环境 使用 .

  • 0

    由于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中修复 .

    相关拉动请求:#663#666

  • 57

    我这样解决了这个警告:

    已安装的PropTypes

    # npm install -S prop-types

    像这样导入PropTypes

    import PropTypes from 'prop-types';

    而不是这样做:

    import { PropTypes } from 'react';

  • 1

    一定不要使用React.PropTypes,示例:

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

    另外一定要正确导入React . 我有这个:

    import * as React from 'react';
    

    应该是:

    import React from 'react';
    

    这修复了我的所有警告 .

  • 2

    enter image description here

    通过简单地运行npm install prop-types解决了这个问题

  • 16

    您可以使用升级版本进行修复

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

相关问题