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

时间:2017-04-09 06:30:28

标签: javascript reactjs redux react-proptypes

我使用redux但是当我运行代码时出现此错误:

  

不推荐通过主React包访​​问PropTypes。使用   来自npm的prop-types包。

我安装

  

npm i prop-types -S

但我仍然有同样的错误。

./组件/动作/ 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
    }
}

./组件/ actiontypes / article.js

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

./组件/减速器/ 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'));

./组件/容器/ 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 个答案:

答案 0 :(得分:60)

正如其他人所提到的 - 如果您已经审核了自己的PropTypes用途项目,但您仍然看到了警告 - 它可能来自上游依赖项。您可以通过设置调试断点来记录此警告的原因之一,然后逐步返回调用者。这是我制作的快速录制示例:

enter image description here

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

一旦您确定了相关的图书馆,请考虑提交Github问题(或者更好的公关!)以告知作者新的警告。

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

答案 1 :(得分:16)

自React v15.5.0发布以来,React.PropTypes已弃用并已移至另一个库。您应该使用npm install prop-types并使用PropTypes。

./components/containers/Scorboard.js上的代码看起来非常好,您的代码中可能还有React.PropTypes

另一个选择是你正在使用的某些依赖仍然是旧的方式。您可以尝试更新您的依赖项,但由于此弃用很新,我怀疑每个库都已发布更新。

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

<强>更新

似乎redux已经更新了它依赖于使用React v15.5.0并删除了弃用警告。它也在v4和v5中修复。

相关提款请求:#663#666

答案 2 :(得分:8)

我用这种方式解决了这个警告:

已安装的PropTypes

# npm install -S prop-types

像这样导入PropTypes

import PropTypes from 'prop-types';

而不是这样做:

import { PropTypes } from 'react';

答案 3 :(得分:2)

请务必不要使用React.PropTypes,sample:

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

答案 4 :(得分:1)

还要确保正确导入React。我有这个:

import * as React from 'react';

应该是:

import React from 'react';

这解决了我所有的警告。

答案 5 :(得分:0)

enter image description here

只需运行即可解决此问题 npm install prop-types

答案 6 :(得分:0)

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

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