Bolehkah anda beritahu saya mengapa useState saya masih kosong? Ia tidak mahu mengemas kininya. Saya menggunakan setInteraval dan fungsi untuk mengemas kini data dan mahu menetapkan useState pada masa semasa, tetapi useState mengabaikan formatTime dalam setTimeOut(res) . Bolehkah anda memberitahu saya bagaimana untuk memperbaikinya?
EDIT: Jika saya memasukkan nombor ke useState
const [timeOut, setTimeOut] = useState(30)
Ia muncul seketika dan kemudian hilang dan saya mempunyai medan kosong. Nampaknya setInterval memadamkan segala-galanya di dalam, jadi bagaimana untuk membetulkannya?
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
} 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini berkemungkinan besar kerana anda menetapkan keadaan dalam tamat masa.
Masalah lain ialah anda memanggil setTimeout di dalamnya.
Sebaliknya, gunakan fungsi yang mengembalikan nilai baharu berdasarkan keadaan sebelumnya.
useState接受一个函数，该函数接收previousStatesebagai parameterconst [count, setCount] = useState(0); useEffect(() => { window.setTimeout(() => { setCount((prevValue) => { return prevValue + 1; // what you return here, will be the new state. }) }, 1000) }, []);Nampaknya masalahnya ialah setInterval berjalan setiap saat dan mengemas kini status (timeOut) setiap saat.
Selain itu, dalam fungsi formatTime, anda menggunakan masa semasa (New Date().getTime()) dan bukannya masa yang diciptaAt time. Oleh itu, status sentiasa dikemas kini dengan nilai baharu setiap saat.
Ini adalah kod yang dikemas kini.
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>; };