文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在执行api post调用时仅当actions页面中的post操作成功时才能路由到页面

问如何在执行api post调用时仅当actions页面中的post操作成功时才能路由到页面
EN

Stack Overflow用户

提问于 2019-10-17 05:09:02

回答 1查看 30关注 0票数 1

我有一个表单组件，在填写表单并放入所有数据后，如果您按下submit，它将转到proectaction并执行axios api post调用。如果成功，我希望它返回到"/dashboard“

/* eslint-disable comma-dangle */
/* eslint-disable arrow-parens */
import axios from 'axios';
// import { useHistory } from 'react-router-dom';
import { GET_ERRORS } from './types';


const createProject = (project) => async dispatch => {
  await axios.post('http://localhost:8080/api/project', project)


    .catch((error) => {
      dispatch({
        type: GET_ERRORS,
        payload: error.response.data
      });
    });
};


export default createProject;

reactjs

react-redux

react-router

回答 1

Stack Overflow用户

发布于 2019-10-17 05:22:18

你可以这样做：

编辑:确保将历史属性传递给操作，或者在组件上使用操作时进行推送。

const createProject = (project, history) => async dispatch => {
  try {
    await axios.post('http://localhost:8080/api/project', project)
    history.push('/')       // <---- Make the push here only after post success.
  } catch(error) {
    dispatch({
        type: GET_ERRORS,
        payload: error.response.data
      });
  }
};

尝试catch block，然后将历史记录推送到不同的路由。

或者：

const createProjectHandler = async () => {
  createProject(project).then(() => {
    props.history.push('/')
  })

}

这只在返回axios调用时有效。我不确定异步和等待是否也是一样的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58421733

复制

相似问题

问如何在执行api post调用时仅当actions页面中的post操作成功时才能路由到页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在执行api post调用时仅当actions页面中的post操作成功时才能路由到页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在执行api post调用时仅当actions页面中的post操作成功时才能路由到页面
EN