React: «this» не определено внутри функции компонента

При работе с компонентами в React вы можете столкнуться с ошибкой «this is undefined» внутри функции, определенной в компоненте. Это может сбить с толку, поскольку, согласно официальной документации, это должно относиться к экземпляру компонента. Итак, почему возникает эта ошибка?

Проблема заключается в том, как React инициализирует компоненты класса. В отличие от классов ES5 старого стиля, компоненты ES6 React не привязывают автоматически методы класса к экземпляру. Это означает, что если у вас есть функция, определенная внутри компонента, например обработчик событий, эта функция не будет ссылаться на компонент.

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

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

Привязывая метод onToggleLoop к компоненту в конструкторе, вы гарантируете, что this ссылается на компонент, когда метод вызывается из обработчика событий. Это позволяет вам получить доступ к состоянию и реквизитам компонента внутри метода.

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