Question

我有以下组件，其中包含redux和专门用于此组件的reducer：

import React, { Component } from 'react';
import classes from './generalinfo.css';
import { Link } from 'react-router-dom';
// import 'icheck/skins/flat/aero.css';
import { Checkbox, Radio } from 'react-icheck';
import { connect } from 'react-redux';


class GeneralInfo extends Component {
    render() {

        return (
            <div className={ classes.screen2 } >
                <table className={ classes.initial__survey__details__table }>
                    <thead>
                        <tr>
                            <td>
                                Gender    
                            </td>
                            <td>
                                    Age    
                            </td>     
                        </tr>     
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="radio" name="customer_gender" onChange={ (e) => this.props.validateRadioInput(e) } />                                     
                                <label>Male</label>
                            </td>
                            <td>
                                <input type="radio" name="customer_age" onChange={ (e) => this.props.validateRadioInput(e) } />                                   
                                <label>Less than 35</label>
                            </td>     
                        </tr>
                        <tr>
                            <td>
                                <input type="radio" name="customer_gender" onChange={ (e) => this.props.validateRadioInput(e) } />                                    
                                <label>Female</label>
                            </td>
                            <td>
                                <input type="radio" name="customer_age" onChange={ (e) => this.props.validateRadioInput(e) } />                                    
                                <label>More than 35</label>
                            </td>     
                        </tr> 
                        <tr>
                            <td colSpan="2">
                                <Link to="/preferences" className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') } 
                                        onClick={ this._ToggleNextScreenButton } >
                                    Next
                                </Link>
                            </td>   
                        </tr>     
                    </tbody>   
                </table>
            </div>
        );
    }

}


const mapStateToProps = state => {
    return {
        infoObj : state.gen
    }
}

const mapDispatchToProps = dispatch => {
    return {
        validateRadioInput : (e) => dispatch({ type: 'VALI_RADIO_INP' , elem : e })
    }
};


export default connect(mapStateToProps, mapDispatchToProps)(GeneralInfo);

如您所见onChange我有以下运行的功能：

onChange={ (e) => this.props.validateRadioInput(e) }

以某种方式在我的reducer中，如果我在console.log中传递了元素，我得到了未定义，我的reducer如下所示：

const initialState = {
    genderRadioClick : false,
    ageRadioClick : false
}

const reducer = (  state = initialState , action , payload ) => {

    switch(action.type) {
        case "VALI_RADIO_INP":
            console.log(payload) // i get undefined here ! why ?
            return state        
    }
    return state;
}

export default reducer;

调度程序功能如下所示：

  validateRadioInput : (e) => dispatch({ type: 'VALI_RADIO_INP' , elem : e })

为什么我在我的reducer中得到undefined，即使我将event传递给函数？

注意:: - 如果我通过e.target我在reducer中得到它，只传递e给我未定义，这是否与事实有关e是一个对象？

Answer 1

因为您获取和设置有效负载不正确：

更正后的行动：

  validateRadioInput : (e) => dispatch({ type: 'VALI_RADIO_INP' , payload : e })

更正了减速器：

const reducer = (  state = initialState , action) => {

switch(action.type) {
    case "VALI_RADIO_INP":
        console.log(action.payload) // i get undefined here ! why ?
        return state        
 }
  return state;
}

 export default reducer;

reducer显示undefined，即使事件传递给调度程序

1 个答案: