Обработчик отправки не работает в ReactJS?
мои друзья, я создаю класс реакции, который получает входное значение при отправке формы, чтобы отправить запрос на получение с помощью axios, но я получил результат после второго клика
class SearchForm extends React.Component{
constructor(props) {
super(props);
this.state = {inputtermvalue: "",spaces_list: "",spacesname: ""};
}
componentDidMount() {
}
updateInputValue(evt){
this.setState({inputtermvalue: evt.target.value});
}
handleSubmit(){
this.setState({spaces_list: $("input.sp-autocomplete-spaces").val()});
this.sendGetRequest();
}
sendGetRequest(){
var _this = this;
this.serverRequest =
axios
.get("/rest/1.0/term/search", {
params: {
query: this.state.inputtermvalue,
spaces: this.state.spaces_list
},
headers: {'content-type': 'application/json'}
})
.then(({data}) => {
также не нужно связывать методы
где ты проверяешь результат
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
setState - это вызов асинхронный, поэтому нельзя ожидать, что он немедленно завершится перед продолжением. В вашем коде здесь:
handleSubmit(){
this.setState({spaces_list: $("input.sp-autocomplete-spaces").val()});
this.sendGetRequest();
}
Вы обновляете состояние, а затем вызываете метод, который использует это новое значение состояния. Что происходит с может быть, так это то, что вы вызываете this.sendGetRequest до того, как ваше состояние завершило обновление.
Вы должны использовать ловушку жизненного цикла componentDidUpdate, чтобы убедиться, что обновление состояния завершено, прежде чем вызывать this.sendGetRequest:
handleSubmit () {
this.setState({
spaces_list: $("input.sp-autocomplete-spaces").val()
});
}
componentDidUpdate (prevProps, prevState) {
if (prevState.spaces_list !== this.state.spaces_list) {
this.sendGetRequest();
}
}
это работает только тогда, когда space_list! = "" но для меня я хотел бы отправить запрос, когда он равен нулю
Затем вы можете удалить проверку if и просто всегда запускать this.sendGetRequest
Вы уверены, что потребовалось два щелчка мышью, и вы не щелкнули его второй раз, ожидая разрешения запроса на получение?