Как установить состояние ответа get в axios?
axios.get(response){
this.setState({events: response.data})
}
Как установить состояние ответа get в axios?
axios.get(response){
this.setState({events: response.data})
}
У вас здесь синтаксическая ошибка. Вы должны попробовать это вместо этого
var self = this;
axios.get('/url')
.then(function (response) {
console.log(response);
self.setState({events: response.data})
})
.catch(function (error) {
console.log(error);
});
//the rest of the code
var a = 'i might be executed before the server responds'
Здесь есть несколько вещей:
axios.get
- это асинхронная функция, которая означает, что остальная часть кода будет выполнена. И когда ответ сервера будет получен, функция, переданная then
будет выполнена. Возвращаемое значение axios.get('url')
называется обещающим объектом. Вы можете узнать больше об этом здесьthis
ключевое слово имеет другое значение в зависимости от того, где оно вызывается. this
в this.setState
должно ссылаться на объект конструктора, и когда вы вызываете this
внутри функции, это относится к объекту window
. Вот почему я назначил this
переменной self
. Вы можете узнать больше об этом здесьPro tip:
Если вы используете ES6, вы хотели бы использовать функции стрелки (которые не имеют свой собственный this
) и использовать this.setState
без присвоения this
переменный. подробнее об этом здесь
axios.get('/url')
.then((response) => {
console.log(response);
this.setState({events: response.data})
})
.catch((error)=>{
console.log(error);
});
Ниже приведен полный пример https://codesandbox.io/s/rm4pyq9m0o, содержащий лучшие методы, обычно используемые для извлечения данных, включая обработку ошибок, повторную попытку и загрузку. Это обеспечивает лучший пользовательский интерфейс. Вам рекомендуется изменить код и поиграть, чтобы узнать больше об этом.
Это не работает, потому что "это" отличается внутри аксиомов. "это" внутри аксиомов относится к объекту axios, а не к вашему реагирующему компоненту. Вы можете решить это с помощью.bind
Также axios не используется должным образом.
он должен выглядеть примерно так:
axios.get("/yourURL").then(function(response) {
this.setState({ events: response.data });
}.bind(this));
Альтернативно, если вы используете es6, вы можете отключить функцию для функции стрелки и получить тот же эффект без привязки
axios.get("/yourURL").then(response => {
this.setState({ events: response.data });
});
Просто попробуйте этот узел js
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => {
const persons = res.data;
this.setState({ persons });
})
если вы используете реакцию js, тогда вы сначала импортируете компонент, а не используете axios
как это:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
Я имел дело с обещаниями, подобными тому, что в прошлом, когда я учился, реагировал. То, что я сделал, было вызвано вызовом api для метода componentDidMount
и установить состояние в начальное значение. Я использовал загрузчик, пока данные извлекались.
componentDidMount() {
const self = this;
axios.get(response){
self.setState({ events: response.data });
}
На данный момент я бы использовал нечто похожее на то, что сказал checkenrode.
Сделайте что-то вроде этого:
var self= this; // self will now be referred to your component
axios.get("http://localhost:3001/get_user?id=" + id)
.then(function (response) {
if(response.data.rows != null)
user_detail = response.data.rows;
console.log(response);
self.setState({email: user_detail.name, name: user_detail.name})
})