警告：propType失败：在'DimensionPicker`中未指定必需的prop'rensionName`。检查`Connect（DimensionPicker）`的render方法 [英] Warning: Failed propType: Required prop `dimensionName` was not specified in `DimensionPicker`. Check the render method of `Connect(DimensionPicker)`

问题描述

我有以下Redux + React组件

I have the following Redux+React component

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

我还有一个缩小器填充初始状态

I also have a reducer which populates the initial state

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

我像这样建立我的国家商店

I build my state store like this

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;

最后这是我加载应用程序的方式

and finally here is how I load my App

import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import App from './Reports/App.jsx';
import MovieLensAppStore from './stores/MovieLensAppStore';

render (
    <Provider store={MovieLensAppStore}>
        <App />
    </Provider>,
    document.getElementById('container')
    )

我的期望是

1. reducer将初始化状态


2. 容器组件将使用容器组件中的2个方法将该状态映射到props / li>
   
3. 最后当组件加载时，它将具有状态和可用的调度方法。

但这不会发生。相反，我得到一个警告，如

but that does not happen. instead I get a warning like

Warning: Failed propType: Required prop `dimensionName` was not specified in `DimensionPicker`. Check the render method of `Connect(DimensionPicker)`.

我在这里发布了我的整个代码库

I have published my entire code base here

https://github.com/abhitechdojo/MovieLensReact

推荐答案

问题已解决。这里麻烦的一点是combineReducers没有正确初始化状态，这就是容器控件说没有指定道具的原因（因为状态是空的）。

The problem was resolved. the troublesome piece here is that the combineReducers is not initializing the state properly, and that is why the container control is saying that the props have not been specified (because the state is empty).

此处记录了解决方案

combineReducers导致代码中断

这篇关于警告：propType失败：在'DimensionPicker`中未指定必需的prop'rensionName`。检查`Connect（DimensionPicker）`的render方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！