Настройте направляющие для вывода вывода HTML вместо XHTML

Если вы прочитали Основные понятия из документов, это объясняется в Обработка событий .

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. Узнайте больше об автобоксе на MDN

Также arrow functions не имеет собственного this. ( MDN ) Поэтому, когда вы делаете this.addtoFavorites.bind(this), нет this для привязки.

Итак, возможные способы обработки событий (в соответствии с документами):

Определите обработчики как обычные функции javascript и связывайте их в конструкторе , как в вашем случае

constructor(props) {
  // This binding is necessary to make `this` work in the callback
  this.addtoFavorites = this.addtoFavorites.bind(this);
}

function addtoFavorites (ev) {

[1121 ] используя экспериментальный синтаксис открытых полей классов , вы можете использовать поля классов для правильной привязки обратных вызовов (не уверен, если это все еще экспериментально):

// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
addtoFavorites = (ev) => {
  ...

с использованием функции стрелки в callback

addtoFavorites = (ev) => {

onClick={(e) => this.addtoFavorites(e)}

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

React рекомендует использовать решение binding.

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