在 promise 中获取构造函数变量

Question

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

TypeError: 无法读取属性 'state' of 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 that fires immediately, like componentWillMount. Also to access this.state inside of your ajax callback, you will need to bind this to the function. Using the 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
           //})
        })
    }
    ...

在 promise 中获取构造函数变量

Get a constructor variable in promise

javascript

constructor

reactjs

fetch-api