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

问题描述

我有以下 Redux+React 组件

import {PropTypes, React, Component} from 'react';导入从反应选择"中选择；类 DimensionPicker 扩展组件 {componentDidMount() {const {onLoad} = this.props;负载();}使成为() {const {onChange, attributeList, currentAttribute} = this.props;返回 (<div><选择值={currentAttribute} options={attributeList} onChange={onChange}/>

)}}DimensionPicker.propTypes = {维度名称:PropTypes.string.isRequired，onChange: PropTypes.func.isRequired,属性列表:PropTypes.arrayOf(PropTypes.shape({值:PropTypes.string.isRequired，标签:PropTypes.string.isRequired}).isRequired).isRequired,currentAttribute: PropTypes.string.isRequired}导出默认DimensionPicker；

和下面的容器组件

从'react'导入React；从 '../actions/DimensionPickerActions' 导入 DimensionPickerActions；从'react-redux'导入{connect}；从'./controls/DimensionPicker.jsx'导入DimensionPicker；const mapStateToProps = (状态) =>{返回 {维度名称:state.dimensionName，属性列表:state.attributeList，currentAttribute: state.currentAttribute}}const mapDispatchToProps = (状态) =>{返回 {onChange: (newValue) =>{调度(更新属性选择(新值))；},onLoad: () =>{dispatch(fetchDimensionAttributes(state.dimensionName));}}}导出默认连接(mapStateToProps，mapDispatchToProps)(DimensionPicker)；

我还有一个 reducer 来填充初始状态

//定义维度选择器的状态树.常量初始状态 = {维度名称:'',isLoading :'假',错误 : ''，当前属性:''，属性列表:[]}函数维度PickerReducer(状态=初始状态，动作){开关(动作.类型){案例 ATTRIBUTE_SELECTION_CHANGED:return Object.assign({}, state, {currentAttribute: action.data});休息;案例 REQUEST_DIMENSION_ATTRIBUTES:返回 Object.assign({}, state, {isLoading: 'true', error: ''})休息;案例 DIMENSION_ATTRIBUTES_RECEIVED:return Object.assign({}, state, {attributeList: action.data, isLoading: 'false', error: action.error});休息;案例 SET_DIMENSION_NAME:return Object.assign({}, state, {dimensionName: action.data})休息;默认:返回状态；休息;}}导出默认维度PickerReducer；

我像这样建立我的州商店

从'react'导入React；import { createStore, combineReducers, applyMiddleware } from 'redux';从redux-thunk"导入 thunk；从'react-redux'导入{提供者}；从'./reducers/DataTableReducer'导入DataTableReducer；从'./reducers/DimensionPickerReducer'导入DimensionPickerReducer；const combineReducer = combineReducer({数据表:DataTableReducer，维度选择器:DimensionPickerReducer});导出默认 applyMiddleware(thunk)(createStore)(combinedReducer);

我像这样加载组件

从'react'导入React；从 '../containers/DimensionPickerContainer' 导入 DimensionPicker；const App = () =>(<div><DimensionPicker dimensionName="流派"/>

)导出默认应用程序；

最后是我如何加载我的应用程序

从'react'导入React；从 'react-dom' 导入 {render}；从'react-redux'导入{Provider}；从'./Reports/App.jsx'导入应用程序；从 './stores/MovieLensAppStore' 导入 MovieLensAppStore；使成为 (<提供商商店={MovieLensAppStore}><应用程序/></提供者>,document.getElementById('容器'))

我的期望是

1. reducer 将初始化状态
2. 容器组件将使用容器组件中的 2 个方法将该状态映射到 props
3. 最后，当组件加载时，它将拥有可用的状态和调度方法.

但这不会发生.相反，我收到了一个警告

警告:失败的 propType:在 `DimensionPicker` 中未指定必需的 prop `dimensionName`.检查`Connect(DimensionPicker)`的渲染方法.

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

https://github.com/abhitechdojo/MovieLensReact

解决方案

问题已解决.这里麻烦的是， combineReducers 没有正确初始化状态，这就是为什么容器控件说没有指定道具(因为状态为空).

此处记录了解决方案

combineReducers 导致代码中断

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;

and the following container component

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

I load the component like

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

My expectation was that

1. the reducer will initialize state
2. the container component will map that state to props using the 2 methods in the container component
3. finally when the component loads, it will have the state and the dispatch methods available to it.

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

解决方案

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

The solution is documented here

combineReducers causes code to break

这篇关于警告:失败的 propType:在 `DimensionPicker` 中未指定必需的 prop `dimensionName`.检查`Connect(DimensionPicker)`的渲染方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！