react计时器未正确增加一

Question

问题是当秒数达到20秒以上时，计时器没有正确增加一，计时器出现故障。这是我的代码和控制台

import React from "react"
export default function Timer() {
const [seconds, setSeconds] = React.useState(null)
React.useEffect(() => {
setInterval(() => {
setSeconds(seconds +1)
},1000)
}, [seconds])
console.log(seconds)
return (
<>
<p>{seconds}s</p>
</>
)
}

在控制台上；

秒：13秒：12秒：14秒：13秒：14秒：20秒：13秒：10秒：13秒：17秒：21

这是应用程序文件；

import React from "react"
import Die from "./Die"
import {nanoid} from "nanoid"
import Confetti from "react-confetti"
import Timer from "./Timer"
import { createRoot } from 'react-dom/client';

export default function App() {
const [dice, setDice] = React.useState(allNewDice())
const [tenzies, setTenzies] = React.useState(false)

React.useEffect(() => {
const allHeld = dice.every(die => die.isHeld)
const firstValue = dice[0].value
const allSameValue = dice.every(die => die.value === firstValue)
if (allHeld && allSameValue) {
setTenzies(true)
}
}, [dice])
function generateNewDie() {
return {
value: Math.ceil(Math.random() * 6),
isHeld: false,
id: nanoid()
}
}

function allNewDice() {
const newDice = []
for (let i = 0; i < 10; i++) {
newDice.push(generateNewDie())
}
return newDice
}

function rollDice() {
if(!tenzies) {
setDice(oldDice => oldDice.map(die => {
return die.isHeld ? 
die :
generateNewDie()
}))
} else {
setTenzies(false)
setDice(allNewDice())
}
}

function holdDice(id) {
setDice(oldDice => oldDice.map(die => {
return die.id === id ? 
{...die, isHeld: !die.isHeld} :
die
}))
}

const diceElements = dice.map(die => (
<Die 
key={die.id} 
value={die.value} 
isHeld={die.isHeld} 
holdDice={() => holdDice(die.id)}
/>
))

return (
<main>
{tenzies && <Confetti />}
<h1 className="title">Tenzies</h1>
<p className="instructions">Roll until all dice are the same. 
Click each die to freeze it at its current value between rolls.</p>
<div className="dice-container">
{diceElements}
</div>
<Timer />
<button 
className="roll-dice" 
onClick={rollDice}
>
{tenzies ? "New Game" : "Roll"}
</button>
</main>
)
}

谢谢你的帮助

Answer 1

您应该在setSeconds中尝试这样的回调，并在cleanup函数中清除间隔。

import React from "react"
export default function Timer() {
const [seconds, setSeconds] = React.useState(0)
React.useEffect(() => {
const interval = setInterval(() => {
setSeconds(prev => prev + 1)
}, 1000)
return () => clearInterval(interval)
}, [seconds])
console.log(seconds)
return (
<>
<p>{seconds}s</p>
</>
)
}