Then() 在 React 中的调度操作之后不起作用答案

【问题标题】：Then() is not working after the dispatched action in ReactThen() 在 React 中的调度操作之后不起作用
【发布时间】：2026-02-07 07:55:02
【问题描述】：

我有以下Login函数：

export function Login(username, password) {
   return dispatch => {
    dispatch(loginBegin());

    axios({
        method: 'post',
        url: 'api/User/Login',
        data: { username, password },
    }).then(response => {

        if (response.data !== null) {
            console.log('success: Login is successful');

            dispatch(loginSuccess(response.data));

        } 
    }).catch(error => { dispatch(loginFailure(error.response.data.message)) });
  }
}

我在Login组件中调用这个函数如下：

function FormSubmitHandle(values) {
    setFormSubmitted(true);

    props.login(values.username, values.password)
        .then((login_succeeded) => {
            console.log('YESSSS');
            console.log(login_succeeded);
        });
}

但是，.then() 部分不起作用。它不会打印任何内容。

任何想法为什么会发生这种情况？

【问题讨论】：

您的登录是一项功能。这不是api调用吗？那么如何将 .then() 用于函数呢？
@xtr response.data 不为空，我正确设置了状态。我想我可能需要做这个功能async?

标签： javascript reactjs promise redux-thunk

【解决方案1】：

你应该返回：

  return axios({
        method: 'post',
        url: 'api/User/Login',
        data: { username, password },
    }).then(response => { ....

看这里：is it considered good practice to pass callBacks to redux async action?

不过，我想知道你想用它做什么。在处理基于通量的模式（例如 Redux）时，我们应该保持数据流向一个方向（记住这一点）

【讨论】：

感谢您的回答！当用户登录成功时，代码更新redux状态成功。但是，我也想将用户导航到下一页。这就是为什么我想做'.then()'。这有意义吗？
我猜这是固执己见。实际上，您可以在操作中执行此操作。
你能澄清一下from the action是什么意思吗？你的意思是从这里export const loginSuccess = (account) => ({ type: LOGIN_SUCCESS, payload: { account } })
您使用异步操作创建器 (redux-thunk)，因此您可以在其中导航。

【解决方案2】：

你可以像下面这样改变它：

export function Login(username, password) {
   return async (dispatch) => {
    dispatch(loginBegin());
try{
      let res = await axios({
         headers:{
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
         },
        'method': 'post',
        'url': 'api/User/Login',
        data: { username, password },
        });
     console.log('success: Login is successful');
     dispatch(loginSuccess(res));
  }
  catch(error)  { dispatch(loginFailure(error.response.data.message)) });

}

然后你可以像下面这样使用它：

cosnt FormSubmitHandle = async (values)=> {
    setFormSubmitted(true);

    let res = awiat props.login(values.username, values.password);
            console.log('YESSSS');
}

【讨论】：