Erhalten Sie eine Constructor-Variable in Versprechen

Question

Ich kann nicht eine Konstruktorvariable in meinem Abrufaufruf mit JavaScript und reagieren. Ich würde gerne den Wert von this.state.numXLabels innerhalb der .then (Funktion (json) Callback, aber ich bekomme TypeError: Kann nicht lesen Eigenschaft 'Zustand' von undefined (...). Was ist die richtige Art, dies zu tun? Hier ist der entsprechende Code:

Typeerror:. Kann nicht Eigentum ‚Staat‘ undefinierter (...)

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

versuchen Sie nicht, Zustand zu verwenden oder machen ajax-Aufrufe im Konstruktor Ihrer React Komponente lesen Stattdessen setzen, dass Rufen Sie innerhalb eines der lifecycle methods, die sofort feuert, wie componentWillMount. Auch auf this.state innerhalb Ihrer Ajax Callback zugreifen, müssen Sie this an die Funktion zu binden.Verwenden Sie die fat arrow function syntax ist der einfachste Weg.

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 
      //}) 
     }) 
    } 
    ...