调用异步函数时，React状态重置

Question

我试图在react中显示一个加载程序，然后执行一个异步函数，然后删除该加载程序，但似乎该函数一开始执行，加载程序就消失了。

这是一个示例代码：

const component = () => {
const [showLoader, setShowLoader] = useState(false)

const clickHandler = async (status: string) => {
setShowLoader(true)
const success = await someAsyncFunction()
success ? setShowLoader(false) : true
}
return (<div hidden={!showLoader}><Loader /></div>)
}

[编辑]这是我的someAsyncFunction的简化版本：

const someAsyncFunction = async() => {
for (let i=0;i < 99999;i++){
console.log(i)
}
return Promise.Resolve(true)
}

很明显，someAsyncFunction确实返回解析Promise，并且在执行循环大约10万次时立即返回

Answer 1

在clickHandler函数中声明一条语句CCD_ 2。引擎将在执行CCD_ 3之后到达该代码。在这一点上，success只是一个承诺，它还没有fulfilled。如果该语句为真，则setShowloader将执行并将加载程序设置为隐藏。一个简单的解决方案是将await关键字放在该语句中的success之前。这就是我们告诉执行该语句的引擎，只要成功是fulfilled或rejcted。

(await success) ? setShowLoader(false) : true

Answer 2

嘿，根据我在那里看到的，你的邦!你的使用改变了你的使用状态如果it's true it will false and vice-versa

所以我建议你改为这样做。如果隐藏的是false，则将看到加载。如果函数成功，则将隐藏到true，否则它将继续显示Loader

const component = () => {
const [showLoader, setShowLoader] = useState(false)

const clickHandler = async (status: string) => {
const success = await someAsyncFunction()
success ? setShowLoader(true) : null
}
return (<div hidden={showLoader}><Loader /></div>)
}

Answer 3

考虑到useState钩子的性质，它不会立即设置值，而是一个请求队列。在这种情况下，在更新状态之前，会调用函数。

最好的方法是将useeffect钩子与showLoader一起用作其依赖项，并执行其中的函数，因为它确保只有在设置状态后才能执行