0

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

Приложение на 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);
4
  • Судя по приведенному куску кода, у тебя каждый рендер вызывает навешивание события keypress на window.
    – ksa
    Commented 6 июн. 2023 в 8:03
  • @ksa Так я пробовал и удалять событие. Один фиг тоже самое Commented 6 июн. 2023 в 9:29
  • В моем-то примере не тоже самое...
    – ksa
    Commented 6 июн. 2023 в 9:48
  • @ksa проверил код. Огромное спасибо!!! Commented 11 июн. 2023 в 0:10

1 ответ 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.