Как установить состояние ответа от аксиомов в реакции

Ответ 1

У вас здесь синтаксическая ошибка. Вы должны попробовать это вместо этого

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, содержащий лучшие методы, обычно используемые для извлечения данных, включая обработку ошибок, повторную попытку и загрузку. Это обеспечивает лучший пользовательский интерфейс. Вам рекомендуется изменить код и поиграть, чтобы узнать больше об этом.

Ответ 2

Это не работает, потому что "это" отличается внутри аксиомов. "это" внутри аксиомов относится к объекту 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 });
});

Ответ 3

Просто попробуйте этот узел 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>
    )
  }
}

Ответ 4

Я имел дело с обещаниями, подобными тому, что в прошлом, когда я учился, реагировал. То, что я сделал, было вызвано вызовом api для метода componentDidMount и установить состояние в начальное значение. Я использовал загрузчик, пока данные извлекались.

componentDidMount() {
 const self = this;
 axios.get(response){
  self.setState({ events: response.data });
}

На данный момент я бы использовал нечто похожее на то, что сказал checkenrode.

Ответ 5

Сделайте что-то вроде этого:

  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})
  })