Question

我目前在React Native中面临一个奇怪的问题。我有一个带有状态的简单组件和一个调用Promise的onPress函数。

让我们将状态定义为：

this.state = {foo: 'bar'}

在onPress函数中，我有：

onPress = () => {
    console.log(this.state);
    promiseFunction()
    .then(()=>{
        console.log(this.state);
    })
}

因此，如果我正常运行并按下按钮，我将获得控制台日志

bar
bar

现在，这是一个很奇怪的部分，让我们说我有另一个按钮或另一段代码将foo的状态更改为“石榴”，然后按下按钮，控制台现在注销：

pomegranate
bar

这种行为令我非常困惑，因为如果有的话，如果setState尚未真正发生，则初始调用将返回原始值，但是promise函数肯定应该具有更新后的值，不是吗？

编辑： promiseFunction实际上只是一个不执行任何操作的解决方案。只是

promiseFunction = Promise.resolve(123)

Answer 1

根据设计承诺，异步运行执行程序功能。这包括创建已解决/已拒绝的承诺。

请考虑一下，好像您的Promise.resolve(23)是对setTimeout(() => {}, 0)的调用一样，或多或少都会这样做：

promiseFunction = () => {
    let thenCallback;
    let thenable = {
        then: (callback) => {
            thenCallback = callback;
        }
    };

    setTimeout(() => {
        // the executor function would be here but...
        // this mocks Promise.resolve so it's resolved right away 
        thenCallback(23);
    }, 0);

    return thenable;
}

不要不使用上面的代码，它在许多方面可能是不正确的，但它只是用来解释Promise的控制流程。

回到您的问题，发生的是该代码首先运行您的console.log(this.state)，当您调用诺言.then回调放在下一个事件循环时，函数调用“返回”在常规事件循环上同步运行时，tha仍在运行，然后在调用完成后发生的所有事情（例如更新组件状态！），只有在下一个事件循环上，promise的.then部分才是叫。

希望这会有所帮助，并且不会使解释过于复杂。事实是，一旦您在代码中包含了Promise，就必须将其后的所有内容都视为异步代码，否则，在这种情况下，由于事情执行不正确，您可能会得到不想要的结果。

当状态在promise中时，为什么状态会返回不同的值？

1 个答案: