Невозможно прочитать свойство setState для undefined, даже если оно определено

  constructor(props) {
    super(props);
    this.state = {
      data: [],
    }
  }

  componentWillMount() {

    axios.get('url here', {
      auth: {
        username: '    ',
        password: '   '
      }
    }).then(function(response) {
      console.info(response.data.value)
      this.setState({
        data: response
      })
    }).catch(function(error) {
      console.info(error)
    }) 

  }
  render() {
    return (
      <div className = "App">
        <header className = "App-header">
          <img src = {logo} className = "App-logo" alt = "logo" />
          <h1 className = "App-title">Welcome to React</h1>
        </header>
        <ul>
        { this.state.data.map(person => <li>{person.name}</li>)}
      </ul>
      </div>
    );
  }
}

Когда мой componentWillMount запускается, журнал консоли точно выводит то, что я хочу. Однако в моем setState написано Cannot read property 'setState' of undefined even though it's defined. Почему выдает эту ошибку, хотя data определен?

reactjs axios

22.08.2018 20:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

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

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что this внутри .then(function() {}) другой. Попробуйте, .then(function() {}.bind(this)) или передайте стрелочную функцию, например

axios.get('url here', {
    auth: {
        username: '    ',
        password: '   '
    }
}).then(response=>{
    console.info(response.data.value)
    this.setState({
        data: response
    })
}
).catch(error=>{
    console.info(error)
})

Демо-код:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/todos").then(
      function(resp) {
        console.info(resp);
        this.setState({ data: resp.data });
      }.bind(this)
    );
  }
  
  render() {
    return (
      <ul>
        {this.state.data.map(todo => <li key = {todo.id}>{todo.title}</li>)}
      </ul>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>

Не уверен, почему фрагменты SO выдают ошибку синтаксис. Фрагмент кода работает здесь.

— 22.08.2018 20:39

22.08.2018 20:22