你能告诉我为什么我的 useState 仍然是空的吗?它不想更新它。我正在使用 setInteraval 和函数来更新数据,并且希望在当前时间设置 useState,但 useState 忽略 formatTime 中的 setTimeOut(res) 。 你能告诉我如何修复它吗?
编辑:如果我将数字放入 useState
const [timeOut, setTimeOut] = useState(30)
它会在第二秒出现,然后就消失了,我有空的字段。 好像setInterval删除了里面的所有内容,那么如何修复呢?
const Timer = ({item}) => { const [timeOut, setTimeOut] = useState('') // << doent want to update it from // formatTime function console.log(timeOut) // still empty useEffect(() => { if (status !== 'unPaid') return; const timer = window.setInterval(() => { setTimeOut(formatTime(createdAt)); }, 1000); return () => window.clearInterval(timer); }, [createdAt, status]); const formatTime = (time) => { console.log(time) // 2023-07-25T23:39:39.253Z // const timer = new Date(time).getTime() + 1800000 const timer = new Date(time).getTime() + 250000 let countDown = new Date().getTime() let distance = timer - countDown let min = Math.floor((distance % (1000*60*60) / (1000*60))) let sec = Math.floor((distance % (1000*60) / (1000))) let res = Math.abs(min) + ':' + Math.abs(sec) console.log(res) // 4:50 setTimeOut(res) // <<<<< it doesnt want to apdate my useState }
P粉1037395662023-09-15 17:42:24
这很可能是因为您在超时内设置状态。
另一个问题是您在其内部调用 setTimeout。
相反,使用一个根据先前状态返回新值的函数。
useState
接受一个函数,该函数接收 previousState
作为参数
const [count, setCount] = useState(0); useEffect(() => { window.setTimeout(() => { setCount((prevValue) => { return prevValue + 1; // what you return here, will be the new state. }) }, 1000) }, []);
P粉9900084282023-09-15 09:23:00
看起来问题是 setInterval 每秒运行一次,并且每秒更新状态(timeOut)。
此外,在formatTime函数中,您使用的是当前时间(new Date().getTime())而不是createdAt时间。因此,状态每秒不断更新为新值。
这是更新后的代码。
const Timer = ({ item }) => { const [timeOut, setTimeOut] = useState(''); useEffect(() => { if (status !== 'unPaid') return; const timer = window.setInterval(() => { setTimeOut(formatTime(createdAt)); }, 1000); return () => window.clearInterval(timer); }, [createdAt, status]); const formatTime = (time) => { const timer = new Date(time).getTime() + 250000; const currentTime = new Date().getTime(); const distance = timer - currentTime; let min = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); let sec = Math.floor((distance % (1000 * 60)) / 1000); let res = Math.abs(min) + ':' + Math.abs(sec).toString().padStart(2, '0'); return res; }; return <div>{timeOut}</div>; };