reactjs - 为什么 React-Redux 不调用动作创建函数

问题描述

我有一段代码在 react-redux 中调用数字输入框时更新用户设置。代码的第一部分工作正常：“onChange”函数被调用。但现在变得很奇怪。onChange 被调用两次，代码跳过一堆反应后端，触及动作创建者，然后执行跳过整个函数并在右括号处退出。

我使用相同的模型创建了许多其他 Redux 函数，它们可以完美地工作，并且无法理解为什么没有调用这个函数。

这是我的代码：

mapDispatchToProps

const mapDispatchToProps = (dispatch) => {
    return {
        SMSAdmin_Get_Users: () => { return dispatch(SMSAdmin_Get_Users()) },
        SMSAdmin_Load_User: (userId, userName, oldData = null, startVal = 0, number = 20) => 
        {
            return dispatch(SMSAdmin_Load_User(userId, userName, oldData, startVal, number))
        },
        SMSAdmin_Update_User: (user, province, credits) => { return  
            SMSAdmin_Update_User(user, province, credits) 
        },
        SMSAdmin_setCurrentUpload: (userName) => { return SMSAdmin_setCurrentUpload(userName) }
    };
}

调用输入

     <Form.Control type="number"
        style={{ width: '100px' }}
        defaultValue={this.props.SMSAdmin.user.credits}
        id='numCredits'
        onChange={(e) => this.updateUser(e.target)}
     />

我知道在输入中我不需要传递事件，但如果我将来出于某种目的需要它，我会包含它。

onChange 函数

//this gets called twice when making a single change in the input box
    updateUser = () => {
        var province = document.getElementById("provinceId");
        var credits = document.getElementById("numCredits");
        var user = document.getElementById("lblUser");
        if (user && user.value !== '') { //safeguard to avoid trying to update nothing
//execution hits here once, then after the second hit proceeds into Redux code
            this.props.SMSAdmin_Update_User(user.value, province.value, credits.value);
        }
    }

Redux 动作创建者

// Execution touches here
export const SMSAdmin_Update_User = (user, province, credits) => (dispatch) => {
//then here jumps to bottom
    dispatch(Actions.SMSAdmin_User_Updating());

    var data = { 'mode': 'UPDATE', 'user': user, 'province': province, 'credits': credits }
    var init = fetchInit();//copy to not modify the original
    init.method = "POST";
    init.body = JSON.stringify(data);
    var myReq = new Request('/dataAPI/SMS', init);

    return fetch(myReq)
        .then((response) => {
            if (response.ok) {
                return response;
            }
            else {
                var error = new Error("Error " + response.statusText);
                error.response = response;
                throw error;
            }
        }, (error) => {
            var err = new Error(error.message);
            throw err;
        })
        .then((response) => { return response.json() })
        .then((resp) => {
            handleData(dispatch, Actions.SMSAdmin_User_Updated, resp)
        })
        .catch((err) => {
            var msg = err.message;
            return dispatch(Actions.SMS_Send_Failed(msg));
        });
} //touches here and exits

我认为这就是所涉及的所有代码。如果我遗漏任何东西，请告诉我，我会将其包括在内。我很困惑执行如何触及函数但不执行它，Chrome 调试也不会在函数头上设置的断点处中断。

标签： reactjsreact-redux

SMSAdmin_Update_User: (user, province, credits) => { // Add dispatch here. It is already done for other functions such as SMSAdmin_Load_User return dispatch(SMSAdmin_Update_User(user, province, credits)) },

reactjs - 为什么 React-Redux 不调用动作创建函数

问题描述

解决方案

推荐阅读