Cum se resetează cronometrul în react-Hooks (Programare, Reactjs)

Khushboo a intrebat.

Am încercat să forțez efectul să se reia pentru a începe din nou intervalul în React-hooks

aici este codul complet în sandbox https://codesandbox.io/s/dreamy-villani-8z938?file=/src/App.js

const [timerReset, resetTimer] = React.useReducer(x => x + 1, 0);

Funcția reducer x=>x+1 incrementează valoarea timerReset ori de câte ori este apelat dispatch. Și apoi folosesc timerReset pentru a forța efectul să fie rulat din nou pentru a începe din nou intervalul (dacă s-a oprit)

Codul meu de timp este

import React from "react";
import "./styles.css";

export default function Timer({
  estimatedTime,
  onTick,
  active,
  newTime,
  timerReset
}) {
  const [counter, setCounter] = React.useState(estimatedTime);
  const [counterSecond, setCounterSecond] = React.useState(newTime);

  React.useEffect(() => {
    let timer;
    let timersecond;
    if (active) {
      timersecond = setTimeout(() => setCounterSecond(counterSecond + 1), 1000);
      timer = counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
    } else {
      onTick(counterSecond);
    }
    return () => {
      if (timer && timersecond) {
        clearTimeout(timer);
        clearTimeout(timersecond);
      }
    };
  }, [counter, counterSecond, active, onTick, timerReset]);

  return (
    <div>
      <div>Time: {counterSecond} </div>
      <div>Countdown: {counter}</div>
    </div>
  );
}```



2 răspunsuri
Dennis Vash

Dacă am înțeles problema, timerReset ar trebui să fie un boolean și utilizat în cadrul useEffect

  // App
  const [timerReset, resetTimer] = React.useReducer(p => !p, false);

  // Timer
  React.useEffect(() => {
    if (timerReset) {
      setCounterSecond(newTime);
      setCounter(estimatedTime);
    }
  }, [timerReset, newTime, estimatedTime]);


export default function App() {
  const [counter, setCounter] = React.useState();
  const [activeAcounter, setActiveCounter] = React.useState(true);

  const [timerReset, resetTimer] = React.useReducer(p => !p, false);

  return (
    <div className="App">
      <h2>Active: {activeAcounter ? "true" : "false"}</h2>
      <h2>Time Reset: {timerReset ? "true" : "false"}</h2>
      <h3>Time: {counter}</h3>
      <button
        onClick={() => {
          setActiveCounter(p => !p);
        }}
      >
        Submit
      </button>
      <button
        onClick={() => {
          resetTimer();
        }}
      >
        Reset
      </button>
      <Timer
        newTime={0}
        estimatedTime={60}
        onTick={setCounter}
        active={activeAcounter}
        timerReset={timerReset}
      />
    </div>
  );
}

Comentarii

  • Dar acum nu sunt în măsură să capturez ora curentă din codul tău –  > Por Khushboo.
  • La apăsarea butonului ar trebui să aleagă ultima oră și să o reseteze la. –  > Por Khushboo.
  • „Reset it to” înseamnă countdown === time ? –  > Por Dennis Vash.
  • Doar explicați în întrebare care ar trebui să fie funcționalitatea… –  > Por Dennis Vash.
  • La clic pe funcția Trimiteți funcția De fapt, încercam să capturez mai întâi timpul și apoi să resetez cronometrul –  > Por Khushboo.
Nagesh Dhope

Iată o soluție puțin simplificată fără useReducerApp.js

import React from "react";
import "./styles.css";
import Timer from "./Timer";

export default function App() {
  const [counter, setCounter] = React.useState();
  const [activeAcounter, setActiveCounter] = React.useState(true);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h3>Time: {counter}</h3>
      <button
        onClick={() => {
          setActiveCounter(false);
        }}
      >
        Reset
      </button>

      <Timer
        newTime={0}
        estimatedTime={60}
        onTick={c => {
          setCounter(c);
          setActiveCounter(true);
        }}
        active={activeAcounter}
      />
    </div>
  );
}

timer.js

import React from "react";
import "./styles.css";

export default function Timer({ estimatedTime, onTick, active, newTime }) {
  const [counter, setCounter] = React.useState(estimatedTime);
  const [counterSecond, setCounterSecond] = React.useState(newTime);

  // Update time after each second
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setCounterSecond(counterSecond + 1);
      setCounter(counter - 1);
    }, 1000);
    return () => clearTimeout(timer);
  }, [counterSecond, counter]);

  // Reset time and countdown
  React.useEffect(() => {
    if (!active) {
      onTick(counterSecond);
      setCounter(estimatedTime);
      setCounterSecond(0);
    }
  }, [active]);
  return (
    <div>
      <div>Time: {counterSecond} </div>
      <div>Countdown: {counter}</div>
    </div>
  );
}

Legătura cu codesandbox -> https://codesandbox.io/s/nameless-worker-ege1k

Tags: