我刚刚参加了一个网络开发课程，发现了一件有趣的事情，我不知道幕后发生了什么，也不知道为什么两个解决方案都能工作：
任务是点击一个ul项目时，它会被打开/关闭
所以我只是添加了一个简单的格式化，使用三元运算符
<li>onClick={handleOnClick}style={{ textDecoration: isClicked ? "line-through" : null }} </LI>
我不明白为什么isClicked的两个解决方案都有效：
const [isClicked, setIsClicked] = useState(false)
第一个版本：
function handleOnClick(){
setIsDone(prevValue => {return !prevValue})
}
第二个版本：
function handleOnClick()
setIsClicked(!isClicked);
}
为什么第二个解决方案在不经过前一个参数的情况下工作？
每次更改状态时，都会对状态更改进行排队。此状态队列的问题在于它是异步刷新的。因此，API为您提供了两个选项，一个是不安全并发的，另一个是安全并发的。您提到的第二个版本是不安全的，因为它从当前状态更改了状态；而不是从以前的状态作为并发安全选项。
因此，如果你使用第二个版本，并在短时间内开始排队等待大量状态更改，你可能会得到一个不希望的最终状态。
在您的例子中，您可能想要依赖于最后一次更改的状态更改，例如：
false->true->false->....->true
第二个版本无法确保这一点。
useState有一个默认参数current State您可以使用它，即第一个版本
function handleOnClick(){
setIsDone(prevValue => {return !prevValue})
}
或直接通过其名称使用状态，即第二个
function handleOnClick()
setIsClicked(!isClicked);
}
它与JS:中的SCOPE有关
示例：
var carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}
对于您的情况：单击时，变量isClicked也是prevValue。