不推荐通过主 React 包访问 PropTypes [英] Accessing PropTypes via the main React package is deprecated

问题描述

我正在使用 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) =>{返回 {类型:ArticleActionTypes.ADD_ARTICLE，名称，描述，大奖赛，图片}}export const RemoveArticle = index =>{返回 {类型:ArticleActionTypes.REMOVE_ARTICLE，指数}}

./components/actiontypes/article.js

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

./components/reducers/article.js

import * as ArticleActionTypes from '../actiontypes/article';常量初始状态 = [{名称:'测试'，描述:'测试'，prix: '测试',图片:'网址'},{名称:'测试'，描述:'测试'，大奖:测试，图片:'网址'}]导出默认函数文章(state=initialState, action){开关(动作.类型){案例 ArticleActionTypes.ADD_ARTICLE :返回 [...状态，{名称:action.name，描述:动作.描述，prix: action.prix,图片:action.image}];案例 ArticleActionTypes.REMOVE_ARTICLE :返回 [...state.slice(0, action.index),...state.slice(action.index +1)];默认:返回状态；}}

index.js

从'react'导入React；从'react-dom'导入{渲染}；从'react-redux'导入{Provider}；从redux"导入{createStore}；从'./components/reducers/article'导入ArticleReducer；从'./components/containers/Scoreboard' 导入记分板；常量存储 = 创建存储(文章减速器，window.__REDUX_DEVTOOLS_EXTENSION__ &&window.__REDUX_DEVTOOLS_EXTENSION__())渲染(<提供者><Scoreboard store={store}/></Provider>, document.getElementById('root'));

./components/containers/Scorboard.js

从'react'导入React；从'react-redux'导入{connect}；从'redux'导入{bindActionCreactors}；从 'prop-types' 导入 PropTypes；类记分板扩展了 React.Component {使成为(){返回 (<div>记分牌

)}}const mapStateToProps = state =>{{文章:状态}}Scoreboard.propTypes = {文章:PropTypes.array.isRequired}导出默认连接(mapStateToProps)(记分板)；

解决方案

正如其他人所提到的 - 如果您已经为 PropTypes 使用审核了自己的项目，但您仍然看到警告 - 这很可能来自上游依赖.您可以追踪此警告的原因的一种方法是在记录该警告的位置设置调试断点，然后返回到调用方.这是我制作的一个快速示例录音:

(提供更高质量的版本这里.)

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

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

I'm using redux but when I run my code I have this error:

Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I install

npm i prop-types -S

but I I still have the same error.

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

解决方案

As others have mentioned- if you have audited your own project for PropTypes uses but you're still seeing the warning- it's likely coming from an upstream dependency. One way you can track down the cause of this warning is by setting a debug breakpoint where it's logged and then stepping back to the caller. Here's a quick example recording I made:

(A higher-quality version is available here.)

Once you've identified the library in question, consider filing a Github issue (or better yet- a PR!) to inform the authors of the new warning.

In the meanwhile, this is only a dev-mode warning so it should not affect production usage of your application.

这篇关于不推荐通过主 React 包访问 PropTypes的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！