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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 06.06.2023

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

Приложение на 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);

javascript reactjs usestate

Источник: Stack Overflow на русском

Answer 1

▲ 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>

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

Ответы