Question

我在下面有此表单代码：

submitForm = (e) => {
    e.preventDefault();

    const { user } = this.state;
    const { dispatch } = this.props;
    if (user.firstName && user.lastName && user.userName && user.password) {
        this.props.dispatch(userActions.register(user));
    } else {
        this.setState({
            error: "Form Incomplete"
        })
    }
    if(this.state.error === "") {
        this.props.history.push("/login");  
    }
}

问题是this.props.dispatch是异步调用。当用户成功填写表单字段时，它将被触发。

问题是，如果用户名已经存在，它将失败，并且将填充错误状态。如果发生这种情况，即使表单有错误，我的应用程序也会继续运行并打入this.props.history并重定向用户。

我基本上如何说“等到this.props.dispatch完成，然后检查是否有任何错误。如果没有，则重定向”？

Answer 1

您可以像这样将submitForm指定为async函数：

submitForm = async (e) => {

，然后在await之前添加this.props.dispatch

await this.props.dispatch(userActions.register(user));

但是由于您正在使用redux，并且我假设使用redux-promise-middleware之类的东西，所以您应该让它处理异步调用的成功/失败。

您提到onInit表单会连续重定向，因为没有设置错误。我们是否可以将初始错误值更改为false，如果错误曾经true，然后重新定向用户？然后，唯一一次将error设置为true的情况就是您的通话中出现了实际错误。

Answer 2

我想您正在将这些数据发送到某种后端。只需在服务器响应中添加布尔值即可让您的前端知道下一步该怎么做。

Futures

如何获取组件以等待异步操作

2 个答案: