Mohammad
3 سال پیش توسط Mohammad مطرح شد
2 پاسخ

تغییر نکردن مقدار State در React

سلام وقتتون بخیر
من میخوام یه تایمر طراحی کنم که سه تا دکمه داره Start, Stop, Reset
الان من چهار تا استیت تعریف کردم برای ساعت دقیقه ثانیه و اینکه آیا Timer شروع به حرکت کرده یا نه
الان من میخوام مقدار استیت ها رو تغییر بدم تغییر نمی کنه

import React, { useState } from 'react';

let interval;
const Timer = () => {
    const [hour, setHour] = useState(0);
    const [minute, setMinute] = useState(0);
    const [second, setSecond] = useState(0);
    const [isStart, setIsStart] = useState(false);

    const startTimer = () => {
        if (isStart === false) {
            setIsStart(true);

            interval = setInterval(() => {
                setSecond(second + 1)

                if(second === 60) {
                    setSecond(0);
                    setMinute(minute + 1);
                };
                if(minute === 60) {
                    setMinute(0);
                    setHour(hour + 1);
                };
                console.log(`${hour} : ${minute} : ${second}`, isStart);
            }, 100);
        };
    };
    const stopTimer = () => {};
    const resetTimer = () => {};

    return(
        <>
            <h4 className="bg-slate-800 rounded-lg px-4 py-3 font-semibold text-base sm:text-lg text-center text-white animate-pulse cursor-pointer">
                {`${hour} : ${minute} : ${second}`}
            </h4>
            <div className="mt-5">
                <button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Start" onClick={startTimer}>Start</button>
                <button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Stop" onClick={stopTimer}>Stop</button>
                <button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Reset" onClick={resetTimer}>Reset</button>
            </div>
        </>
    );
};

export default Timer;

یه لاگ گرفتم داخل interval میخواستم ببینم تغییر می کنه یا نه که نتیجش اینه
 تصویر

ممنون میشم راهنماییم کنید


ثبت پرسش جدید
مهدی رفیعی
تخصص : توسعه دهنده نرم افزار
@mahdirafiei 3 سال پیش مطرح شد
2

سلام محمد جان،

تنها میتونم چند تا پیشنهاد کوچیک بهت بدم و نکاتی رو بهت یادآوری کنم:

  • توی داری با سرعت فوق العاده بالایی فانکشنت رو اجرا میکنی و این یه ذره مشکل ساز هستش (۱۰ بار در هر ثانیه)
  • آپدیت شدن state ها چند لحظه زمان میبره
  • بعد از آپدیت هر state کل اپ دوباره رندر میشه و تو در هر ثانیه با ۱۰ بار اجرا و ۳ مقدار دهی، اپلیکیشن رو مجبور میکنی تا ثانیه ای ۳۰ بار رندر بشه.

بیا و ساختار کلی رو تغییر بده.

یه استیت کلی بزار برای تمام ثانیه ها و توی interval هر ثانیه تنها ۱ بار یک ثانیه به مقدارش اضافه کن.

  const [interval,setIntervalId] = useState(null);
  const [seconds,setSeconds] = useState(0);

  const start = () => {
    interval && clearInterval(interval); // اگه از قبل تایمری وجود داره، حذفش کن

    const newInterval = setInterval(()=>{
      setSeconds(seconds+1);
    },1000);
    setInterval(newInterval);
  };

و در xml اطلاعات مورد نیاز رو اینطوری نمایش بده.

<p>
    {Math.floor(seconds/60)}:{seconds%60}
</p>

اگه سوال دیگه ای داری میتونی با کمال میل بپرسی، در غیر این صورت میتونی بحث و گفت و گو رو ببندی 😉


Mohammad
@Mohammad.Naderi85 3 سال پیش مطرح شد
0

خیلی ممنون از راهنماییتون 🙏🙏


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام