Получить переменную конструктора в обещании

Я не могу получить переменную конструктора в моем вызове выборки с помощью javascript и реагировать. Мне нужно значение this.state.numXLabels в обратном вызове .then(function(json), но я получаю TypeError: Cannot read property 'state' of undefined(…). Как правильно это сделать? Вот соответствующий код:

TypeError: Не удается прочитать состояние свойства неопределенного (…)

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

reactjs javascript constructor fetch-api
person joshlevy89    schedule 23.04.2016    source источник
comment
Взгляните на Плохая практика, когда функция-конструктор возвращает обещание? для общей проблемы, хотя, вероятно, специфическое для реакции решение.   -  person Bergi    schedule 24.04.2016

Ответы (1)


arrow_upward
3
arrow_downward

Не пытайтесь использовать состояние или выполнять вызовы ajax в конструкторе вашего компонента React. Вместо этого поместите этот вызов в один из методов жизненного цикла. который срабатывает немедленно, например componentWillMount. Кроме того, чтобы получить доступ к this.state внутри вашего обратного вызова ajax, вам нужно будет привязать this к функции. Использование синтаксиса функции с толстой стрелкой — самый простой способ.

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
           //})
        })
    }
    ...
person Andy Noelker    schedule 23.04.2016
comment
Благодарность! привязка была ключом. переход на componentWillMount также хорош для структурной чистоты. синтаксис толстых стрелок — отличный совет. также может быть достигнуто следующим образом: .then(function(json){ console.log(this.state.numXLabels); }.bind(this)) - person joshlevy89; 23.04.2016