Comment construire un clicker qui compte au clic mais n'affiche que les nombres impairs avec des composants réactifs ?

Question

Donc je veux construire un clicker comme exercice. Le clicker doit être construit avec des composants react en utilisant des hooks.

Es chaque compteur, il commence à 0 et augmente de un. Le compteur est spécial dans la mesure où il compte chaque clic mais n'affiche que les nombres impairs.

Concept : Affiché : 0 1 3 5 7 9 ... Suivi en arrière-plan : 0 1 2 3 4 5 6 7 8 9 ...

Le code que j'ai jusqu'à présent est un simple compteur et j'ai commencé à mettre en œuvre une instruction if. Mais je ne suis pas sûr de la logique qui m'aiderait à réaliser le clicker.

import React, { useState } from "react";
import ReactDOM from "react-dom";

// Counter that displays only odd numbers, but counts with each click
const App = () => {
  const [count, setCount] = useState(0);

  function onClick() {
    if(count%2!=0) {
      setCount(count + 1)
    } else {
      setCount(count + 1)
    }
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

On dirait que votre onClick fait la même chose :

 function onClick() {
    if(count%2!=0) {
      setCount(count + 1)
    } else {
      setCount(count + 1)
    }
  }

Vous devez peut-être ajouter un autre état à votre application pour gérer les nombres impairs :

import React, { useState } from "react";
import ReactDOM from "react-dom";

// Counter that displays only odd numbers, but counts with each click
const App = () => {
  const [count, setCount] = useState(0);
  const [oddCount, setOddCount] = useState(0);

  function onClick() {
    if(count%2!=0) {
      setCount(count + 1)
    } else {
      setOddCount(oddCount + 1)
    }
  }

  return (
    <div>
      <p>You clicked {oddCount} times</p>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

Voici donc le code que j'ai trouvé et il rend/affiche effectivement les étranges. Je suis un peu surpris cependant puisque l'instruction if vérifie les nombres pairs ?!?!?! Une explication à cela ?

i

mport React, { useState } from "react";
import ReactDOM from "react-dom";

// Counter that displays only odd numbers, but counts with each click
const App = () => {
  const [count, setCount] = useState(0);
  const [renderedCounter, setRenderedCounter] = useState(0);

  function onClick() {
    setCount(count + 1);

    if (count % 2 == 0) {
      setRenderedCounter(count+1);
    }
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <p>The current odd number is {renderedCounter}</p>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

Puisque le compteur continu ne sera pas responsable de la mise à jour de la vue (rendu) à chaque clic, je vous suggère de le garder dans un fichier de type useRef . Il a la même référence à chaque rendu, mais il ne déclenche pas de nouveau rendu lorsqu'il est mis à jour.

Ensuite, je vérifierais si la valeur de l'élément counter_ref est impair et mettre à jour la variable d'état en conséquence.

De React DOCS : https://reactjs.org/docs/hooks-reference.html#useref

useRef()

Essentiellement, useRef est comme une "boîte" qui peut contenir une valeur mutable dans sa propriété .current.

Vous connaissez peut-être les refs principalement comme un moyen d'accéder au DOM. Si vous passez un objet ref à React avec , React définira sa propriété .current au nœud DOM correspondant chaque fois que ce nœud change.

Cependant, useRef() est utile pour plus que l'attribut ref. C'est pratique pour conserver toute valeur mutable, de la même manière que vous utilisez les champs d'instance dans les classes.

// Counter that displays only odd numbers, but counts with each click
function App() {
  const counter_ref = React.useRef(0);
  const [count, setCount] = React.useState(null);

  function onClick() {
    counter_ref.current = counter_ref.current + 1;
    if (counter_ref.current %2 !== 0) {
      setCount(counter_ref.current);
    }
  }

  return (
    <div>
      { count === null ?
        <p>You have not clicked yet...</p>
        : <p>You clicked {count} times</p>
      }
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>