setState вызывает неожиданный триггер метода обработчика событий - PullRequest
Новая
       7

setState вызывает неожиданный триггер метода обработчика событий

0 голосов
/ 27 мая 2020

Я использую обработчик событий щелчка, который вызывает setState. но кажется, что setState вызывает непрерывный неожиданный триггер обработчика события щелчка.

состояние состоит из объекта (содержащего минуты и секунды), который должен быть уменьшен, когда я нажимаю элемент html. 

    const sessionLength = {min: 25,
      sec: 0}
    this.state = {
      breakLength: 5,
      sessionLength: sessionLength,
      sessionProcessed: sessionLength
    }

это обработчик события щелчка: 

  startPomodoro(){
    this.setState(prevState=>({sessionProcessed: {...prevState.sessionProcessed, sec: prevState.sessionProcessed.sec - 1}}));
  };

и JSX: 

  render(){
    return(
      <div class="ml-5">
        <h1>Test</h1>
        <div>Session</div>
        <div><strong id="session">{this.state.sessionLength.min}:{this.state.sessionLength.sec}</strong></div>
        <div><i id="play" class="fa fa-play" onClick={this.startPomodoro()}></i> <i id="pause" class="fa fa-pause" onClick={this.pausePomodoro()}></i></div>
      </div>
    )
  }

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

Ответы [ 3 ]

2 голосов
/ 27 мая 2020

Вы вызываете обработчик (startPomodoro()) вместо того, чтобы просто передать его (startPomodoro). Измените свой код на: 

<i id="play" class="fa fa-play" onClick={this.startPomodoro}></i> <i id="pause" class="fa fa-pause" onClick={this.pausePomodoro}></i>
0 голосов
/ 27 мая 2020

Что касается приведенных выше ответов, передача функции стрелки (onClick={ () => this.startPomodoro() }) будет отлично работать. Если вы передаете обратный вызов, вы должны привязать функцию обратного вызова к ссылке this. Как это: onClick={ this.startPomodoro.bind(this) }

0 голосов
/ 27 мая 2020

При вызове обработчика у вас есть два варианта:

  • передача обратного вызова ( лучший вариант )
  • объявление анонимной функции при рендеринге

Передача обратного вызова onClick={this.startPomodoro}

Объявление анонимной функции onClick={() => this.startPomodoro()}

Учтите, что если вы объявляете анонимная функция, которая может вызвать некоторые проблемы с производительностью, как указано в документации: https://reactjs.org/docs/handling-events.html

Проблема с этим синтаксисом заключается в том, что каждый раз, когда компонент создается другой обратный вызов оказывает. В большинстве случаев это нормально. Однако, если этот обратный вызов передается в качестве опоры для более низких компонентов, эти компоненты могут выполнить дополнительный повторный рендеринг. Обычно мы рекомендуем использовать привязку в конструкторе или использовать синтаксис полей класса, чтобы избежать проблем с производительностью такого рода.

...