Javascript 警告:失败的propType:未在“DimensionPicker”中指定必需的prop“dimensionName”。检查“连接”(维度选择器)的渲染方法`
我有以下Redux+React组件Javascript 警告:失败的propType:未在“DimensionPicker”中指定必需的prop“dimensionName”。检查“连接”(维度选择器)的渲染方法`,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,我有以下Redux+React组件 import {PropTypes, React, Component} from 'react'; import Select from 'react-select'; class DimensionPicker extends Component { componentDidMount() { const {onLoad} = this.props; onLoad(); } render() {
import {PropTypes, React, Component} from 'react';
import Select from 'react-select';
class DimensionPicker extends Component {
componentDidMount() {
const {onLoad} = this.props;
onLoad();
}
render() {
const {onChange, attributeList, currentAttribute} = this.props;
return (
<div>
<Select value={currentAttribute} options={attributeList} onChange={onChange} />
</div>
)
}
}
DimensionPicker.propTypes = {
dimensionName: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
attributeList: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
}).isRequired).isRequired,
currentAttribute: PropTypes.string.isRequired
}
export default DimensionPicker;
import React from 'react';
import DimensionPickerActions from '../actions/DimensionPickerActions';
import {connect} from 'react-redux';
import DimensionPicker from './controls/DimensionPicker.jsx';
const mapStateToProps = (state) => {
return {
dimensionName: state.dimensionName,
attributeList: state.attributeList,
currentAttribute: state.currentAttribute
}
}
const mapDispatchToProps = (state) => {
return {
onChange: (newValue) => {
dispatch(updateAttributeSelection(newValue));
},
onLoad: () => {
dispatch(fetchDimensionAttributes(state.dimensionName));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(DimensionPicker);
我还有一个填充初始状态的减速器
// define the state tree for the dimenion picker.
const initialState = {
dimenisionName: '',
isLoading :'false',
error : '',
currentAttribute: '',
attributeList: []
}
function dimensionPickerReducer(state = initialState, action) {
switch(action.type) {
case ATTRIBUTE_SELECTION_CHANGED:
return Object.assign({}, state, {currentAttribute: action.data});
break;
case REQUEST_DIMENSION_ATTRIBUTES:
return Object.assign({}, state, {isLoading: 'true', error: ''})
break;
case DIMENSION_ATTRIBUTES_RECEIVED:
return Object.assign({}, state, {attributeList: action.data, isLoading: 'false', error: action.error});
break;
case SET_DIMENSION_NAME:
return Object.assign({}, state, {dimensionName: action.data})
break;
default:
return state;
break;
}
}
export default dimensionPickerReducer;
我像这样建立我的国家商店
import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import DataTableReducer from './reducers/DataTableReducer';
import DimensionPickerReducer from './reducers/DimensionPickerReducer';
const combinedReducer = combineReducers({
dataTable: DataTableReducer,
dimensionPicker: DimensionPickerReducer
});
export default applyMiddleware(thunk)(createStore)(combinedReducer);
我像这样加载组件
import React from 'react';
import DimensionPicker from '../containers/DimensionPickerContainer';
const App = () => (
<div>
<DimensionPicker dimensionName="Genre"/>
</div>
)
export default App;
我已经在这里发布了我的整个代码库
您将“初始状态”作为默认参数提供给减速器,但这仅在实际调用减速器时用作该减速器的默认状态。由于您尚未调度任何操作,初始状态取决于您提供给createStore
的值,可能是在MovieLensAppStore
中
我不知道你是如何创建你的商店的,但这应该是可行的,例如:
createStore(
combineReducers({
dimensionPickerReducer
}),
{
dimensionPicker: {
dimenisionName: '',
isLoading :'false',
error : '',
currentAttribute: '',
attributeList: []
}
}
)
问题解决了。这里最麻烦的是combinereducer没有正确初始化状态,这就是为什么容器控件说没有指定props(因为状态为空) 这里记录了解决方案
您省略了实际初始化redux的代码,并执行初始的
渲染。执行此操作的时间点将决定何时填充初始数据。此外,应用程序最好是connect
ed,而不是DimensionPicker
。这使得它可以重用,尽管它不能解决您眼前的问题。请看一看我加了这个。但现在它又给出了一个错误(和以前的错误一样)在传递给createStore的initialState参数中发现了意外的键“dimensionName”、“isLoading”、“error”、“currentAttribute”、“attributeList”。期望找到一个已知的reducer键:“dataTable”、“dimensionPicker”。意外的键将被忽略。
请查看此处。我根据你的GitHub发布了问题的根本原因,看起来你已经发现了我的错误。忘记带商店钥匙了。我编辑了我的答案以符合要求。
Warning: Failed propType: Required prop `dimensionName` was not specified in `DimensionPicker`. Check the render method of `Connect(DimensionPicker)`.
createStore(
combineReducers({
dimensionPickerReducer
}),
{
dimensionPicker: {
dimenisionName: '',
isLoading :'false',
error : '',
currentAttribute: '',
attributeList: []
}
}
)