Question

我无法使用javascript在我的fetch调用中获取构造函数变量并做出反应。我想在.then（函数（json）回调中的this.state.numXLabels的值，但我得到TypeError：无法读取属性＆＃39;未定义的状态（...）。什么是正确的方法这样做？以下是相关代码：

TypeError：无法读取属性＆＃39; state＆＃39;未定义的（...）

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组件的构造函数中使用state或make 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
           //})
        })
    }
    ...

获取promise中的构造函数变量

1 个答案: