Question

onSubmit(e) {
    e.preventDefault();

    const user = {
        fname: this.state.firstname,
        lname: this.state.lastname,
        email: this.state.email,
        username: this.state.username,
        password: this.state.password
    }

    new Promise((resolve,reject) => {
        this.props.fetchUser(this.state.username)
            .then(res => {
                this.setState({failed: this.props.exists})
                if(!this.state.failed)
                    this.props.registerUser(user)
            })
            .then(res => {
                this.setState({registered: this.props.status});
                resolve();
            })
    })
}

这是我链接诺言的尝试。想法是注册应该正确更新为this.props.status的状态（是/否）。

在第一个承诺中调用this.props.registerUser时，它将this.props.status更改为true。但是，registered被设置为false（这是在调用registerUser之前this.props.status的值），而不是true。

我肯定知道this.props.status更改为true，但是注册状态没有更改。

我是新手。

Answer 1

我假设fetchUser和registerUser是返回承诺的函数。在这种情况下，您无需将fetchUser的调用包装在new Promise(...)中，因为调用时它将返回一个Promise。

未调用第二个then(...)的原因是，您永远不会从第一个then(...)返回承诺。

if(!this.state.failed)
    this.props.registerUser(user)

应该成为

if(!this.state.failed)
    return this.props.registerUser(user)

通过这两个修改，您的代码应如下所示

this.props.fetchUser(this.state.username)
    .then(res => {
        this.setState({
            failed: this.props.exists
        });
        if (!this.state.failed) {
            return this.props.registerUser(user)
        }
    })
    .then(res => {
        this.setState({
            registered: this.props.status
        });
    })

此外，您可能希望读取fetchUser(...)对象上res的结果，而不是组件属性。

您应该意识到的最后一个警告是，不能保证始终设置状态并在之后读取状态。安全的方法是将一个函数作为第二个参数传递给setState，当状态由React更新时将调用该函数。

在这种情况下，最简单的方法是避免完全读取状态，而使用临时变量。

const exists = this.props.exists;
this.setState({
    failed: exists
});
if (!exists ) {
    return this.props.registerUser(user)
}

我保证正确链接吗？

1 个答案: