не может установитьState используя axios

Question

componentDidMount() {
  var self = this;

  axios.get('http://URL')
    .then(function (response) {
      console.log(response.data);
      this.setState({
        data: response.data
      })
    })
    .catch(function (error) {
      console.log(error);
    });
}

Я получил эту ошибку: Ошибка типа: Невозможно прочитать свойство 'setState' из неопределенного

Answer 1

Вы можете избежать проблемы контекста this и использовать эту альтернативу.Поскольку Axios возвращает обещание, вы можете использовать async / await и не думать о контексте this.

Используйте это так:

async function getData(url){
    try {
        return await axios.get(url);
    } catch(error) {
        console.log(error);
    }
}

async componentDidMount(){
    let response = await getData('http://URL');
    console.log(response.data);
    this.setState({data: response.data});
 }

Выглядит более читабельно и проще в использовании и для других функций и компонентов.

Answer 2

Если вы используете self вместо this в setState, это должно исправить.

Answer 3

Вы можете использовать функцию стрелки ES6, которая автоматически связывает лексическую родительскую область видимости для вас.

componentDidMount(){
     axios.get('http://URL')
         .then( response => {
            console.log(response.data);

            this.setState({
                data: response.data
            })
     })
    .catch(error =>  {
        console.log(error);
   });
 }

Представление self излишне и происходит из jQuery.Он использовался до появления функции стрелки ES6.

Вы можете прочитать об автоматической this привязке в функциях стрелок здесь:

https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

Также проверьте эти ссылки, чтобы лучше понять, как this работает в Javascript илогика охвата:

https://scotch.io/tutorials/understanding-scope-in-javascript https://javascriptplayground.com/javascript-variable-scope-this/

Answer 4

Используйте функцию стрелки, так что вам не нужно зависеть от локальной переменной, и область будет обрабатываться автоматически

 componentDidMount(){
     axios.get('http://URL')
         .then( response => {
            console.log(response.data);
            this.setState({data: response.data})
     })
    .catch(error =>  {
        console.log(error);
   });
 }

Или замените это на self, выполняя setState, как показано ниже

  componentDidMount(){
      var self = this;
      axios.get('http://URL')
         .then(function (response) {
             console.log(response.data);
             self.setState({data: response.data})
     })
    .catch(function (error) {
       console.log(error);
    });
  }

Оба вышеуказанных варианта будут работать.Я бы порекомендовал вам перейти с первого варианта