Функция не перерисовывается при нажатии кнопки

Я делаю простой счетчик реакции, где при нажатии кнопки INC значение должно изменить значение внутри h1. Но это не работает.

Мой код в App.js:

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

export default function App() {
  let count = 0;

  function handleInc () {
    return count++;
  }

  return (
    <>
      <div>
        <h1>{count}</h1>

        <div className='container'>
        <button onClick={handleInc}>INC</button>
        <button>DEC</button>
        <button>RESET</button>
        </div>
      </div>
    </>
  );
}

Подскажите, пожалуйста, в чем ошибка?

Источник
  • 1
    Проверьте компоненты на основе класса реакции / хук useState.
Codelisting
за 4 против
Лучший ответ

Вам нужно использовать State ! При каждом щелчке этот метод сообщит, что нужно повторно отрендерить этот компонент и все дочерние элементы, тем самым отображая обновленный счетчик в dom.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  let [count, setCount] = useState(0);

  function handleInc () {
    return setCount(count + 1);
  }

  return (
    <>
      <div>
        <h1>{count}</h1>

        <div className='container'>
        <button onClick={handleInc}>INC</button>
        <button>DEC</button>
        <button>RESET</button>
        </div>
      </div>
    </>
  );
}
  • 0
    Что такое let [count, setCount] = useState (0);
  • 1
    useState возвращает array из 2 элементов, некоторые назовут это кортежем. Я использую назначение деструктурирования, чтобы вытащить первый и второй элементы в count переменных, это ваше состояние и setCount , функция, которая обновит count . Когда setCount , он сообщает React о необходимости повторного рендеринга вашего компонента.
Codelisting
Популярные категории
На заметку программисту