Question

我想在this.onLoggin()完成后调用函数this.props.verifyCode(params);，我该怎么做。这是我的功能：

onSubmit = (e) => {
        e.preventDefault();
        let params = {
            email: this.props.email,
            codeVerify: this.state.code
        }
        this.props.verifyCode(params);
        this.onLoggin();

    }

onLoggin = () =>{
        if(this.props.isVerify === true){
            const body = {
                username: this.props.user.username,
                password: this.props.user.password
            }
            this.props.loggin(body);
        }
    }

verifyCode来自redux：

const AUTHEN_URL = 'http://localhost:8080/client/user-info-client/regist';

const verifyCode = (params) => dispatch => {
    axios.post(AUTHEN_URL, null, {params})
        .then(res => {
            dispatch({
            type: VERIFY_CODE,
            payload: res.data.data,
        })});
}

export default verifyCode;

这是我的减速器：

const initialState = {
        isVerify: false
};

const verifyCode = (state = initialState, action) => {
    switch (action.type){
        case VERIFY_CODE:
            return {
                isVerify: true
            }
        default:
            return state;

    }
}

export default verifyCode;

Answer 1

注意到this.props.verifyCode(params)是一个异步函数。您必须使用async await方法或.then。

使用.then：

this.props.verifyCode(params).then(response => this.onLoggin()).catch(error => error)

使用async await：

onSubmit = async (e) => {
        e.preventDefault();
        let params = {
            email: this.props.email,
            codeVerify: this.state.code
        }
        try{
            await this.props.verifyCode(params);
            this.onLoggin();
        }
        catch(error){
             return error
        }


    }

axios请求

const verifyCode = (params) => dispatch => {
    return axios.post(AUTHEN_URL, null, {params})
        .then(res => {
            dispatch({
            type: VERIFY_CODE,
            payload: res.data.data,
        })
        return res.data
      });
}

如果这不起作用。您可以尝试使用异步等待方法吗？

希望这会有所帮助

Answer 2

您的verifyCode是一个redux动作。您需要添加一个化简器以利用作为响应收到的信息。另外，在配置存储时添加减速器。

export const verification = (state = { isVerify : false, loginInfo : null}, action) => {
  switch (action.type) {
    case ActionTypes.VERIFY_CODE:
      return {...state, isVerify : true, loginInfo: action.payload};

    default:
      return state;
  }
};

然后，继续matchStateToProps并使用

if(this.props.verification.isVerify === true)

检查用户是否已成功验证。您还可以使用this.props.verification.loginInfo

添加更多条件渲染

Answer 3

verifyCode（）函数返回一个promise，因此您可以捕获该promise，然后在函数完成后可以调用this.onLoggin（）。

 onSubmit = (e) => {
            e.preventDefault();
            let params = {
                email: this.props.email,
                codeVerify: this.state.code
            }
            const data = this.props.verifyCode(params);
            data.then(result => {
               this.onLoggin();
            }).catch(error => {
                console.log(error);
            });          
        }

在上一个函数完成后调用一个函数reactjs

3 个答案: