Реактивная функция стрелок дает различный опыт отладки

Question

В настоящее время я работаю над проектом реагирующего пользовательского интерфейса, и в нем много отладок с помощью браузеров. Странно то, что когда я не использую функцию стрелки на событии нажатия кнопки, отладчик браузера показывает this.state как неопределенное при наведении на него курсора. Когда я использую функцию стрелки

{() => this.alert ()}

консоль отладчика показывает правильное состояние при наведении мыши, и обе эти записи корректно выводят, когда я делаю console.log (). Также я проверил это поведение в Chrome, и оно такое же, как FF.

Любой, кто имеет какую-либо идею, будет высоко оценен, так как это приносит действительно большую проблему при отладке без наблюдения за состоянием, и это не реалистично для console.log для каждого изменения состояния.

Не удалось отобразить это состояние при наведении на него курсора

Может показывать это состояние при наведении указателя мыши на

Answer 1

Обратите внимание, что когда вы делаете:

somehandler = () => { ... }

в вашем компоненте, это уже привязано к экземпляру компонента, то есть this = your component instance, поэтому вам не нужно делатьonClick={() => this.somehandler() }, который связывает его еще раз с экземпляром компонента.

Придерживайтесь первого, и вам будет хорошо!

Редактировать: Теперь я понимаю, что это на самом деле onClick={this.somehandler}, что вызывает у вас console.log.Это может быть связано либо с тем, как реализовано преобразование Вавилона, либо с инструментами разработки ... Вы можете попробовать классическую привязку, подобную этой, чтобы посмотреть, поможет ли это:

constructor() {
  this.somehandler = this.somehandler.bind(this);
} 

somehandler() {
   // ....
}

render() {
  return <button onClick={this.somehandler}>...</button>
}