如何在反应路由器中加载下一页之前等到服务调用完成

Question

我对包含四种表单的应用程序有疑问。 当组件卸载时，表单的每个页面都会执行 POST。 这是业务要求，只要用户离开页面，就会发布表单信息，因此我无法将逻辑移动到页面上的“下一步”按钮。

当表单的下一页加载时，它需要执行 GET。我的问题是 POST 可能需要一些时间，所以 GET 在 POST 之前被调用。

在将用户路由到发生 GET 的表单的下一页之前，如何等待 POST 服务调用完成。

这是我在表格第一页的内容。 onSubmit 触发到下一页的路由，然后当组件卸载时，它会在到达下一页之前进行需要完成的服务调用。

componentWillUnmount() {
    this.props.postServiceCall();
}

onSubmit = () => {
    routeToNextPage();
};

在下一页我有 GET，它在我的 POST 完成之前完成。

componentDidMount() {
    this.props.getServiceCall();
}

我正在使用反应路由器。特别是浏览器路由器。 提醒：我无法通过 onSubmit 更改 POST。 每次用户离开页面时都需要发布帖子，以便将他们的数据保存到服务器。

任何想法都会有所帮助！

Answer 1

您必须改用 localStorage 来发送网络请求。始终建议将部分信息存储在 localStorage 中，以解决像您的案例这样的小问题。您可以随时从 localStorage 中检索信息。 无论如何，ajax 调用是异步的，我们无法确定先前的请求是否已保存在我们的数据库中。