警告：失败propType：必需的prop`dimensionName`在“DimensionPicker”中未指定。检查的`连接（DimensionPicker）render方法`

Question

我有以下终极版+阵营部件

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; 

，并终于在这里是我如何加载我的应用程序

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. 减速将初始化状态
2. 容器组件将映射该st在组件加载时最后使用容器组件中的2种方法支撑道具，它将具有可用的状态和调度方法。

但这并没有发生。相反，我得到这样

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

警告我发表我的整个代码库这里

https://github.com/abhitechdojo/MovieLensReact

Answer 1

的问题得到了解决。这里的麻烦是联合减速机没有正确地初始化状态，这就是为什么容器控制器说道具没有被指定（因为状态是空的）。

该解决方案在这里

combineReducers causes code to break

Answer 2

您提供的“初始状态”作为默认参数，以此来减速，但这只是使用作为reducer实际调用时的默认状态。由于您尚未发出任何操作，因此初始状态取决于您向createStore提供的值，推测可能是MovieLensAppStore。

我不知道你如何创建你的店，但这应该工作，例如：

createStore(
    combineReducers({ 
     dimensionPickerReducer 
    }), 
    { 
     dimensionPicker: { 
      dimenisionName: '', 
      isLoading :'false', 
      error : '', 
      currentAttribute: '', 
      attributeList: [] 
     } 
    } 
)