在promise中获取构造函数变量

Question

我无法在使用 javascript 的 fetch 调用中获取构造函数变量并做出反应。我想要 .then(function(json) 回调中 this.state.numXLabels 的值，但我得到 TypeError: Cannot read property 'state' of undefined(...)。这样做的正确方法是什么？这里是相关代码：

TypeError: 无法读取 undefined(...) 的属性“状态”

import React, { Component } from 'react'
class StockGraph extends Component {

constructor(props) {
    super(props);
    this.state = { numXLabels: 0 }
     var url = 'https://www.quandl.com/api/v3/datasets/WIKI/MSFT'+
           '.json?api_key=bCRpjzvgPNkxLzqAv2yY';
    fetch(url)
    .then(function(response) {
      return response.json()
    })
    .then(function(json) {
      console.log(this.state.numXLabels);
       //this.setState({
        // numXLabels: 30
       //})
    })
  }
...

Answer 1

不要尝试在 React 组件的构造函数中使用状态或进行 ajax 调用。相反，将该调用放在立即触发的lifecycle methods 之一中，例如componentWillMount。此外，要在 ajax 回调中访问 this.state，您需要将 this 绑定到该函数。使用fat arrow function syntax 是最直接的方法。

class StockGraph extends Component {
    constructor(props) {
        super(props);
        this.state = { numXLabels: 0 }
    }

    componentWillMount() {
        var url = 'https://www.quandl.com/api/v3/datasets/WIKI/MSFT'+
           '.json?api_key=bCRpjzvgPNkxLzqAv2yY';
        fetch(url)
        .then((response) => {
           return response.json()
         })
        .then((json) => {
            console.log(this.state.numXLabels);
            //this.setState({
             // numXLabels: 30
           //})
        })
    }
    ...