我正在使用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 回答
正如其他人所提到的那样 - 如果您已经审核了自己的项目
PropTypes
,但是您可能来自上游依赖项 . 您可以通过设置调试断点来查找此警告的原因的一种方法是's logged and then stepping back to the caller. Here'是我做的快速示例录制:(可提供更高质量的版本here . )
一旦您确定了相关库,请考虑提交Github问题(或者更好的PR - !)以通知作者新警告 .
同时,这只是一个开发模式警告,所以它不应该影响应用程序的 生产环境 使用 .
由于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
我这样解决了这个警告:
已安装的PropTypes
# npm install -S prop-types
像这样导入PropTypes
import PropTypes from 'prop-types';
而不是这样做:
import { PropTypes } from 'react';
一定不要使用React.PropTypes,示例:
另外一定要正确导入React . 我有这个:
应该是:
这修复了我的所有警告 .
通过简单地运行npm install prop-types解决了这个问题
您可以使用升级版本进行修复