reactjs - React 无法设置未定义的属性

Question

我正在使用 axios 发出获取请求。我知道一个事实，当我发出 get 请求时，我得到了正确的数据。

我的构造函数中有一个数组 (allQuotes)。但是，当我尝试在 componentDidMount 中引用它时，它是未定义的。

class App extends Component {

  constructor() {
    super();
    this.allQuotes = [];
  }

  componentDidMount() {

    axios.get("http://getquote.herokuapp.com/get")
    .then(function (response) {
      this.allQuotes = response.data;
      console.log(response.data);
      this.getNewQuote();
    })
    .catch(function (error) {
      console.log("Error: ", error);
      //console.dir(error);
    });
  }

运行后，控制台显示“无法设置未定义的属性‘allQuotes’”。

为什么 this 未定义？

Answer 1

最好将 allQuotes 放入状态然后使用 setState

class App extends Component {

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

  componentDidMount() {

    axios.get("http://getquote.herokuapp.com/get")
    .then(function (response) {
      this.setState({ allQuotes: response.data })
      console.log(response.data);
      this.getNewQuote();
    })
    .catch(function (error) {
      console.log("Error: ", error);
      //console.dir(error);
    });
  }