代码之家 › 专栏 › 技术社区 › Alexander Solonik

即使将事件传递给调度程序,Reducer也显示未定义

dom-events redux reactjs javascript

Alexander Solonik · 技术社区 · 6 年前

我有以下集成了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如下所示:

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;

dispatcher函数如下所示:

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

为什么我会 undefined 在我的减速机中,即使我通过 event 到功能?

注::- 如果我通过 e.target 我把它放在减速器里,只是通过 e 给我一个未定义的答案,这和 e 是对象吗?

1 回复 | 直到 3 年前

Artem Mirchenko 6 年前

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

纠正措施:

  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;