Правильно ли я обещаю цепочку

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 (true / false).

Когда this.props.registerUser вызывается в первом обещании, он изменяет this.props.status на true.Однако для параметра selected устанавливается значение false (что является значением this.props.status до вызова registerUser), а не true.

Я точно знаю, что this.props.status меняется на true,но состояние зарегистрированных не меняется.

Я новичок в этом деле.

Answer 1

Я предполагаю, что fetchUser и registerUser - это функции, которые возвращают обещания.В этом случае вам не нужно заключать вызов для fetchUser в new 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)
}