Блог

у меня есть этот код, в основном, своего рода приложение для викторины. Я хочу сделать таймер отдыха, когда пользователь нажимает на следующую или предыдущую кнопку. Для этого нужна помощь. Мы можем сделать это, создав только один компонент и создав одно из состояний как reset, но в этом случае каждая вторая главная страница будет повторно отображаться.

 const CalcTimeLeft = () => {
  const [time, setTime] = useState(300000);
  useEffect(() => {
    setTimeout(() => {
      setTime(time - 1000);
    }, 1000);
  }, [time]);
  const timeLeft = {
    minutes: Math.floor(time / 60 / 1000) % 60,
    seconds: Math.floor(time / 1000) % 60
  };
  return <div>{`${timeLeft.minutes}:${timeLeft.seconds}`}</div>;
};
export default function App() {
  const [currPage, setCurrpage] = useState(1);

  const question = [
    
  ];

  const handleNext = () => {
    setCurrpage(currPage   1);
  };
  const handlePrev = () => {
    setCurrpage(currPage - 1);
  };
  let item_per_page = 1;
  let total_page = Math.floor(question.length / item_per_page);
  const data = question.splice((currPage - 1) * item_per_page, item_per_page);
  return (
    <div className="App">
      {data.map((data) => {
        return <div>{data.question}</div>;
      })}
      <CalcTimeLeft />
      {currPage !== total_page amp;amp; <button onClick={handleNext}>Next</button>}
      {currPage !== 1 amp;amp; (
        <button onClick={() => setCurrpage(handlePrev)}>Previous</button>
      )}
    </div>
  );
}
  

Вы можете отобразить событие сброса в компоненте CalcTimeLeft.

 const CalcTimeLeft = () => {
  const [time, setTime] = useState(300000);
  const resetTime = () => {
    setTime(300000);
  };
  useEffect(() => {
    setTimeout(() => {
      setTime(time - 1000);
    }, 1000);
  }, [time]);

  return { resetTime };
};
export default function App() {
  const [currPage, setCurrpage] = useState(1);

  const question = [];

  const { resetTime } = CalcTimeLeft();

  const handleNext = () => {
    resetTime;
    setCurrpage(currPage   1);
  };

  const handlePrev = () => {
    resetTime;
    setCurrpage(currPage - 1);
  };

  const timeLeft = {
    minutes: Math.floor(time / 60 / 1000) % 60,
    seconds: Math.floor(time / 1000) % 60,
  };
  let item_per_page = 1;
  let total_page = Math.floor(question.length / item_per_page);
  const data = question.splice((currPage - 1) * item_per_page, item_per_page);

  return (
    <div className="App">
      {data.map((data) => {
        return <div>{data.question}</div>;
      })}
      <div>{`${timeLeft.minutes}:${timeLeft.seconds}`}</div>
      {currPage !== total_page amp;amp; <button onClick={handleNext()}>Next</button>}
      {currPage !== 1 amp;amp; <button onClick={handlePrev()}>Previous</button>}
    </div>
  );
}