Onclick事件将新项目推入数组，但该项目仅在下一次单击时才被推入

Question

我试图在点击目标后推送新项目或React中的setState。我控制台，记录事件。结果和我预期的一样。但是，它不会立即添加到数组中。只有在下一次单击之后，数组才会更新，这意味着，例如，在我单击10次之后，数组中只有9个项目，其中没有我最后单击的项目。然后在我再次点击后，第10个会被添加。谢谢你的帮助!

const [clickedArray, setClickedArray] = useState([])
const handleClick = (e) => {
const clicked = e.target.alt
console.log(clicked)
setClickedArray(clickedArray => [...clickedArray,clicked])
console.log(clickedArray)
if(hasDuplicates(clickedArray)){
alert('over')
setScore(0)
setClickedArray([])
if(score > highScore){
setHighScroe(score)
}
} else{
setScore(clickedArray.length)
}
}

Answer 1

解决方案是不依赖于刚刚更改的状态。

const [clickedArray, setClickedArray] = useState([])
const handleClick = (e) => {
const clicked = e.target.alt
const newArray = [...clickedArray,clicked]
if(hasDuplicates(newArray)){
alert('over')
setScore(0)
setClickedArray([])
if(score > highScore){
setHighScroe(score)
}
} else{
setClickedArray(newArray)
setScore(clickedArray.length)
}
}