Как построить кликер, который рассчитывает с кликом, но отображает только нечетные числа с реагирующими компонентами?

Question

Итак, я хочу создать кликер в качестве упражнения.Кликер должен быть построен с реагирующими компонентами, используя крючки.

Каждый счетчик начинается с 0 и увеличивается на единицу.Счетчик отличается тем, что подсчитывает каждый клик, но отображает только нечетные числа.

Концепция: Отображается: 0 1 3 5 7 9 ... Отслеживается в фоновом режиме: 0 12 3 4 5 6 7 8 9 ...

Код, который у меня есть, является простым счетчиком, и я начал реализовывать оператор if.Хотя я не уверен, какая логика поможет мне достичь кликера.

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

Похоже, вы onClick делаете то же самое:

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

Возможно, вам нужно добавить другое состояние в ваше приложение, которое обрабатывает нечетные числа:

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

Поскольку непрерывный счетчик не будет отвечать за обновление представления (рендеринга) при каждом клике, я предлагаю вам сохранить его в useRef.У него одна и та же ссылка на каждый рендер, но он не запускает рендеринг при обновлении.

Тогда я бы проверил, является ли значение counter_ref нечетным, и обновил бы переменную состояния соответствующим образом.

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

useRef ()

По сути, useRef походит на «коробку», которая может содержать изменяемое значение вего свойство .current.

Возможно, вы знакомы с ссылками в первую очередь как способ доступа к DOM.Если вы передадите объект ref объекту React, React будет устанавливать его свойство .current для соответствующего узла DOM при каждом изменении этого узла.

Однако useRef () полезен не только для атрибута ref.Это удобно для хранения любого изменяемого значения примерно так же, как вы используете поля экземпляров в классах.

// 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"/>

Answer 3

Итак, это код, который я придумал, и он действительно отображает / отображает нечетные.Хотя я немного удивлен, так как оператор if проверяет четные числа?!?!?!Любое объяснение этому?

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);