首页 > 解决方案 > React/Redux 组件没有正确渲染

问题描述

我是 Redux 的新手,我的问题是无法渲染组件并且没有任何错误消息显示,当我只渲染 Option1(变量)时,它正确显示而无需应用 redux,有人帮忙吗?谢谢你 !!!!任何人都可以通过一些编码示例解决我的问题吗?

行动

function clickRaidoButt(id) {
    return {
        type: 'CLICK_RADIO',
        payload: id
    }
}

减速机

function reducreForRadio(state = initialStateForRadio, action) {
    if (typeof state === 'undefined') {
        return 0
    }

    var id;

    switch(action.type) {
        case 'CLICK_RADIO': {
             return {
                 id: action.payload
             }
        }
        default: {
             return state
        }
    }
}

零件

var Option1 = React.createClass({


    render() {
        const { id } = this.props;    

        return ( 
            <label>
                <input  
                    onClick={() => this.props.clickRaidoButt('option1')}  
                    type="radio" 
                    id="option1" 
                    name="selOption" 
                />
            </label>
        );
    }
});

映射

function mapDispatchToPropsForRaidoButt (dispatch) {
    return { 
        clickRaidoButt : (id) => dispatch(clickRaidoButt(id))
    };
}

function mapStateToPropsForRaidoButt(state) {  
    return {  
        id: state.reducreForRadio.id
    }  
}  

联系

var rootReducer = Redux.combineReducers({
    reducreForAge,
    reducreForButtonGroup2,
    reducreForRadio
});

const radio1 = connect(mapStateToPropsForRaidoButt,mapDispatchToPropsForRaidoButt)(Option1);

ReactDOM.render(
    <Provider store={store}>
        <radio1/>
    </Provider>,
    document.getElementById('selOption1')
);

标签: reactjsredux

解决方案


推荐阅读