Почему setState не работает, возникает ошибка?

Question

[alexfrolov_xcx]

Почему у меня ошибка в данном случае?

Comments

[Vitaliy]

покажите код, откуда вызывается метод handleSearch, может ему нужен bind()

[alexfrolov_xcx]

Виталий Столяров,

Answer 1

[Vitaliy]

В конструктор добавить:

// This binding is necessary to make `this` work in the callback
this.handleSearchs = this.handleSearchs.bind(this);

Источник: https://reactjs.org/docs/handling-events.html

П.С. Хотелось бы добавить вопрос к опытным в React'е:
это похоже на хак/костыль, или это нормальная практика?

Comments

[alexfrolov_xcx]

спасибо, помогло)

[abberati]

Одна из нормальных. В es6 для этого появились arrow functions:
handleSearch = evt => {}

При таком объявлении метода не будет потери контекста и биндить его не нужно.

[Vitaliy]

abberati, про arrow в курсе, наверное это просто специфика JSX? так как в том же angular или vue получается меньше телодвижений и код чище

[alexfrolov_xcx]

Виталий Столяров, тоесть мне переписать на этот лад handleSearch = evt => {} ?

[Vitaliy]

alexfrolov_xcx, вопрос мне или комментатору? Так конечно будет удобнее и меньше кода (с помощью arrow функций)

[alexfrolov_xcx]

Виталий Столяров, вопрос вам Виталий) а как мне это правильно переписать, можите показать?

[Vitaliy]

alexfrolov_xcx, в конструкторе разве что (как в комментарии выше, только через this)

[abberati]

Виталий Столяров, jsfiddle.net/560fyjnp/455

[Vitaliy]

abberati, это чисто JSX'овская фишка? так как в Babel такое не поддерживается

[Святослав]

Виталий Столяров, какое такое?
Это не jsx фишка, а обычная стрелочная es6 функция, бабель такое поддерживает.

[Vitaliy]

Святослав, нет, не поддерживает

только через плагин: https://stackoverflow.com/a/31362350/3853903

Answer 2

[Святослав]

Функция не привязана ни к какому контексту. Напиши либо стрелочную функцию handleSearch = event => {}
Либо поставь биндинг на функцию: onChane={this.handleSearch.bind(this)}