时间戳

首页 > 解决方案 > 无法理解传递函数以更新状态挂钩的工作原理

javascript - 无法理解传递函数以更新状态挂钩的工作原理

问题描述

在以下代码中：

// create state count
const [count,setCount] = useState(0)

//update state 
setCount(count-1)
setCount(count-1)

count 的值只减一，因为 setCount() 是一个异步函数。我明白这一点。但是为什么下面的代码可以正常工作，即当传递一个函数而不是一个语句时，计数减少了 2？

setCount(prevCount => prevCount-1)
setCount(prevCOunt => prevCount-1)

为什么这里没有出现与第一种情况相同的行为？我对异步函数的经验有限，并且是新手。谢谢阅读！

标签： javascriptreactjsasynchronous

解决方案

count 的值只减一，因为 setCount() 是一个异步函数

不。即使有两次调用，它也会减少 1，setCount因为您传递count - 1给两个函数调用。在这两个调用中，您传递的是相同的值。

第一次调用后count不更新的原因是因为状态在组件的特定渲染中是恒定的。组件在重新渲染之前无法看到更新的状态。setCount

如果 的值为count5，则如下

setCount(count-1)
setCount(count-1)

就好像

setCount(5 - 1)
setCount(5 - 1)

为什么这里没有出现与第一种情况相同的行为？

那是因为当您将函数传递给 时setCount，prevCount是 的最新值count。在这种情况下，您不会从 的相同值中减去 1 count。

如果 的值为count5，则如下

setCount(prevCount => prevCount-1)
setCount(prevCount => prevCount-1)

就好像

setCount(5 => 5 - 1)
setCount(4 => 4 - 1)

推荐阅读