Отправляя форму в этом проекте React, я хочу сделать запрос на получение axios к API Google Places, но я не могу обновить свое состояние. Не похоже, что componentDidMount () может быть привязан к событию, подобному моему handleSubmit (). Есть предложения по обновлению моего состояния?
import React, { Component } from "react";
import axios from "axios";
import Search from "../Components/Search";
import ResultContainer from "../Components/ResultContainer";
export default class Body extends Component {
constructor(props) {
super(props);
this.state = {
city: "",
sights: {},
bites: {}
};
this.handleChangeEvent = this.handleChangeEvent.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangeEvent(event) {
this.setState({ city: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
console.info(this.state);
axios
.get(
"https://maps.googleapis.com/maps/api/place/textsearch/json?
query=attractions+in+" +
this.state.city +
"&key=myKeyFromGoogle",
{
mode: "no-cors",
header: {
"Access-Control-Allow-Orgin": "http://localhost:3000",
"Content-Type": "application/json",
"Access-Control-Allow-Headers":
"Origin, X-Requested-With, Content-Type, Accept"
},
withCredentials: true,
credentials: "same-origin"
}
)
.then(response => {
this.setState({ sights: response.data.results });
})
.catch(function(err) {
console.info("err", err);
});
}
render() {
return (
<div>
<Search
city = {this.state.city}
handleChangeEvent = {this.handleChangeEvent}
handleSubmit = {this.handleSubmit}
/>
<ResultContainer sights= {this.state.sights}/>
<ResultContainer />
</div>
);
}
}
Когда я пытаюсь установить состояние после запроса axios, мне кажется, что у меня нет данных, готовых для рендеринга. Любые предложения будут ценны. Спасибо!
Ответ console.info перед setState.
А также вы можете использовать жизненный цикл componentWillReceiveProps () для обновления прицелов.
Переместите свои запросы в контроллер, такой как thunk или saga.
Попробуйте использовать стрелочную функцию.
@null, когда я пытаюсь использовать стрелочные функции, он говорит, что мой метод не определен. Было бы ОГРОМНОЙ помощью, если бы вы могли показать мне, как с этим справиться ...



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В функции handleSubmit () используется понятие контекста.
handleSubmit(event) {
var _this = this;
//then use in setState as bellow
_this.setState({ sights: response.data.results});
}
Пробовал это. Я могу console.info (_this) после setState, но все еще обнаруживаю ошибку. Есть предположения?
Я думаю, что response.data.results - это массив объектов. Если это так, то в конструкторе меняются взгляды: [];