Повторно вызывается метод при использовании useState React

Question

Помогите, что то совершенно не доходит до меня почему так происходит.

Приложение на React, максимально упростил код для понимания проблемы. Есть событие "keypress", при нажатии Enter, должен вызваться метод, и там увеличь значение на единицу.

Проблема в том что при использовании useState, с каждым последующим Enter, увеличивается количество вызванных console.log в методе test().

Вот такая картина получается, это за 3 нажатия Enter

Уже пробовал удалять события, и много разного. Помогите решить, я уже всю голову сломал )))

const [count, setCount] = useState(0);

function initCode(e : any): void{
    if(e.key == "Enter"){
        test()
    }
}

function test(){
    setCount(prev => prev + 1)
    console.log(count);
}

window.addEventListener("keypress", initCode);

Answer 1

Уже пробовал удалять события, и много разного.

Значит не так ты с событиями работал. Вот такой вариант работы с событиями предлагают сами разработчики Реакта. При создании компонента событие навешивается... При размонтировании - удаляется.

//
const Test = props => {
  const [count, setCount] = React.useState(0)
  React.useEffect(_ => {
    window.addEventListener("keypress", initCode)
    return _ => {
      window.removeEventListener("keypress", initCode)
    }
  })
  function initCode(e : any): void{
    if(e.key == "Enter"){
        test()
    }
  }
  function test(){
    setCount(prev => prev + 1)
    console.log(count);
  }
  return <div>
    <p>{count}</p>
  </div>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<Test />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Повторно вызывается метод при использовании useState React

Ответы (1 шт):