状态未使用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值。