Question

我有一个具有某种形式的组件，此刻，在提交按钮上，我调用一个函数handleSubmit（在我的组件上），该函数通过{{1} }和此操作，我调用了服务（HTTP请求）。

处理提交

dispatch

actions.addDevice

handleSubmit = (e) => {
   e.preventDefault()
   const { validateFields } = this.props.form;

   validateFields((err, params) => {
       if (!err) {
            const { user, dispatch } = this.props;

            let response = dispatch(actions.addDevice(params))
            console.log(response); //Response is undefined
       }
    });
}

service.addDevice

function addDevice(params){
    return (dispatch, getState) => {
        let { authentication } = getState();
        dispatch(request({}));

        service.addDevice(params, authentication.user.access_token)
            .then(
                response => {
                    if(response.status === 201) {
                        dispatch(success(response.data));
                    }
                    return response;
                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            )
    }

    function request(response) { return { type: constants.ADD_DEVICE_REQUEST, response } }
    function success(response) { return { type: constants.ADD_DEVICE_SUCCESS, response } }
    function failure(error) { return { type: constants.ADD_DEVICE_FAILURE, error } }
}

我希望在我的组件中获得响应以能够进行验证，但是由于请求是异步的，所以我永远无法获得响应，而只输出未定义的变量。如何获得响应同步？或者我需要做些什么才能进行验证？

Answer 1

您没有返回承诺service.addDevice。

因此您可以进行return service.addDevice...，在handleSubmit中可以进行dispatch(...).then((data) => ...do something with the data...)

Answer 2

let response = dispatch(actions.addDevice(params))

这是异步的。因此，从console.log（）返回undefined并不奇怪。 console.log（）甚至在调度过程完成之前执行。使用promise或async await语法。我建议使用async-await语法。

handleSubmit = (e) => {
   e.preventDefault()
   const { validateFields } = this.props.form;

   validateFields(async (err, params) => {
       if (!err) {
            const { user, dispatch } = this.props;

            let response =await dispatch(actions.addDevice(params))
            console.log(response); //Response is undefined
       }
    });
}

Answer 3

Please replace your code with this code

handleSubmit

handleSubmit = (e) => {
   e.preventDefault()
   const { validateFields } = this.props.form;

   validateFields((err, params) => {
       if (!err) {
            const { user, dispatch } = this.props;

            dispatch(actions.addDevice(params)).then((response)=>{
                  console.log(response);
            })
       }
    });
}

actions.addDevice

function addDevice(params){
    return (dispatch, getState) => {
        let { authentication } = getState();
        dispatch(request({}));

        return service.addDevice(params, authentication.user.access_token)
            .then(
                response => {
                    if(response.status === 201) {
                        dispatch(success(response.data));
                    }
                    return response;
                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            )
    }

    function request(response) { return { type: constants.ADD_DEVICE_REQUEST, response } }
    function success(response) { return { type: constants.ADD_DEVICE_SUCCESS, response } }
    function failure(error) { return { type: constants.ADD_DEVICE_FAILURE, error } }
}

我如何从调度中得到响应？

3 个答案: