Реагировать - setState не обновляет массив
Вот мой код:
class App extends Component {
state = {
query: '',
results: []
}
handleSearch(e) {
var query = e.target.elements.query.value;
axios.get("http://www.omdbapi.com/?s = " + query + "&page=1&apikey=xxxx")
.then(function (response) {
console.info(response.data);
this.setState({
results: response.data.Search
});
}.bind(this))
.catch(function (error) {
});
e.preventDefault();
}
Я пытаюсь получить данные из omdb и показать их на странице.
проблема в том, что setState не обновляет массив results?
Любая идея ? Спасибо
@ Толле да; вывод: «TypeError: невозможно прочитать свойство 'setState' of undefined»
@Axnyff, но я просто привязываю его с помощью .bind (this)
@Chino Хорошо. Затем вам, скорее всего, потребуется привязать handleSearch к this в конструкторе или превратить handleSearch в функцию стрелки свойства класса: handleSearch = (e) => { ... };
@Axnyff var self = this; self.setState({ results: response.data.Search }); тоже не работает
Не видел привязки звонка, извините. как сказал @Tholle, вам также нужно привязать handleSearch. Как вы это называете?
@Chino Проблема не в функции обратного вызова axios, а в самой функции handleSearch, которая не имеет ожидаемого значения this.
Да, теперь он работает, поэтому правильный путь - использовать стрелочную функцию вместо написания множества функций для привязки к конструктору. Верно ?
Это вопрос предпочтений. Мне лично нравится использовать стрелочные функции, поскольку в большинстве случаев вы можете вообще пропустить конструктор таким образом.
Спасибо большое, ребята, можете написать в качестве ответа, если хотите.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы привязываете функцию, вызываемую, когда запросы axios завершаются правильно, но вы также должны привязать сам метод handleSearch. Вы можете сделать это в конструкторе или вместо этого использовать функцию стрелки свойства класса:
class App extends Component {
state = {
query: '',
results: []
}
handleSearch = (e) => {
// ...
}
}
Если вы пишете
console.error(error);внутри своей функцииcatch, записывает ли она что-нибудь в консоль? Вы получаете сообщение об ошибке на вкладке «Сеть» в Инструментах разработчика?