定时器在react函数中的最佳方法

Question

我试图创建一个函数，在按钮点击创建一个倒计时计时器，在完成隐藏一系列数字，并显示输入如下，

import { useEffect, useState } from "react";
import { requireAuth } from "util/auth.js";
import Sidebar_Users from "components/dashboard/Sidebar/Sidebar_Users";
import MindVaultSection from "components/dashboard/MindVault/MindVaultSection";
import BottomNavigation from "../../components/dashboard/BottomNavigation/BottomNavigation";

function makeid(length) {
var result           = '';
var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}

function Baseline(props) {
const [wStatus, setWStatus] = useState("completed"); // walkthrough Status
var [time, setTime] = useState()

// RandomString generates a random string of length n
const numbers = makeid(7)

useEffect(() => {
}, []);
function handleClick(e) {
setTime(5)
e.preventDefault();
console.log('The link was clicked.');
}

return (

<>

<Sidebar_Users dashboard={"Progress Map"}>
<div>Working Memory Test</div>
<div>You are about to do a small short term memory test.  A few letters will 
flash
on your computer monitor for 3 seconds.  Your job is to write down as many
letters as you can remember</div>

<div className="bg-white rounded-lg shadow p-4 items-center justify-center">{numbers}</div>
<div className="bg-white rounded-lg shadow p-4 items-center justify-center">{time}</div>
<div className="bg-white rounded-lg shadow p-4 items-center justify-center">
<div className="font-thin px-2 pb-4 text-lg">Enter your pin code</div>
<div className="flex">
<div    >
<input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" value="" maxlength="1" max="9" min="0" inputmode="decimal"/>
<input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" value="" maxlength="1" max="9" min="0" inputmode="decimal"/>
<input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" value="" maxlength="1" max="9" min="0" inputmode="decimal"/>
<input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" value="" maxlength="1" max="9" min="0" inputmode="decimal"/>
<input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" value="" maxlength="1" max="9" min="0" inputmode="decimal"/>

</div>
</div>
</div>
<button onClick={handleClick} className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 bg-gradient-to-r from-pink-500 to-orange-500 hover:from-teal-600 hover:to-green-300   text-white font-semibold rounded-md">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="-ml-1 mr-2 h-5 w-5"
>
<circle cx="12" cy="12" r="10"></circle>
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
</svg>
<span>Here we go</span>
</button>
</Sidebar_Users>
<BottomNavigation />
</>
);
}

export default Baseline;

我有点困惑与状态管理创建定时器函数-是否有一个特定的方法库?本教程中的示例强调了在基于类的函数中使用状态，我应该只使用类还是可以使用普通函数

感谢

Answer 1

可能有计时器库，这在许多应用程序中很常见;但我把这个留给你自己去谷歌。

如果你想使用setTimeout，可以在这里找到react功能组件的综合教程。

TL;博士一个通用的计时器解决方案通常是这样的。

useEffect(() => {
if (triggerTimeout) // some conditional to trigger the timeout to run
{
const timeout = setTimeout(() => {
// do anything, this block runs after the timeout has "expired"
// could even set state
setSomeState(someNewState);
}, 1000) // timeout expires in 1000 ms
// make sure to clear the timeout on component unmount to avoid memory loss issues
return () => clearTimeout(timeout);
// this callback function runs only on component unmount, not re-renders
}
}, [triggerTimeout]);