前端开发库项目 - 构建一个番茄时钟

告诉我们发生了什么:
在此详细描述你的问题。

用react框架的hooks构建一个倒计时,倒计时的时间为变量value,运行start函数后倒计时开始,我在clock函数里打印hour和sec显示能正常倒计时,但我把他们改成 seta([hour, sec])后却不生效

你目前的代码
import ‘./App.css’
import ‘…/node_modules/bootstrap/dist/css/bootstrap.css’
import ‘bootstrap/dist/js/bootstrap’
import { useState } from ‘react’

function App() {
const [mins, setmins] = useState(25)
const [min, setmin] = useState(5)
const [[ab, cd], seta] = useState([0, 0])

const start = (value) => {
let sec = 0
let hour = value
const clock = () => {
if (sec === 0 && hour === 0) {
clearInterval(timer)
} else if (sec === 0 && hour !== 0) {
sec = 5
hour–
} else {
sec–
}
seta([hour, sec])
}
const timer = setInterval(clock, 1000, value)
}
start(8)
// clock()

return (


25 + 5 Clock





Break Length


增加
{min}

减少


Session Length


增加
{mins}

减少




Session



{ab}:{cd}



开始
暂停
重置



{/*
Designed By zghust In Beijing
*/}

)
}

export default App

你的浏览器信息:

用户代理是: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

挑战: 前端开发库项目 - 构建一个番茄时钟

挑战的链接:

原因是加载问题,把一进入就执行改成按钮点击后执行就没问题了

1 Like