状态未随React挂钩而变化

Question

为什么在执行runTimer后，它会持续每秒记录0？

const [timer, setTimer] = useState(0)
const runTimer = (x) => {
let interval = setInterval(() => {
setTimer(prev => prev - 1)
console.log(timer)
}, 1000)
}

Answer 1

值是有作用域的，并且始终相同

请尝试将该值记录在外部，因为状态更改将强制进行渲染。国家也不应该"变异"。国家应该始终是一个新的对象，而不是一个突变。

const [timer, setTimer] = useState(0)
const runTimer = (x) => {
let interval = setInterval(() => {
setTimer(prev => prev - 1)
}, 1000)
}
console.log(timer)

你的第二个问题

let interval的作用域意味着您只能在该级别使用clearInterval。我不确定用这种方法有什么好方法可以做到这一点。您可能想要使用钩子useEffect来设置间隔。

Answer 2

setTimer是一个异步调用，您将无法在设置状态后立即获得timer。

useEffect在这里救援。

useEffect(() => {
// your action
}, [timer]);

您将始终获得更新的timer值。