2016-04-23 8 views
2

Я не могу получить переменную-конструктор в моем вызове fetch с помощью javascript и отреагировать. Я хотел бы значение this.state.numXLabels внутри обратного вызова .then (function (json), но я получаю TypeError: Не могу прочитать свойство «состояние» неопределенного (...). Каков правильный способ сделать это? соответствующий код:Получить переменную-конструктор в обещании

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

Взгляните на [Разве это плохая практика, чтобы иметь конструктор функции возвращают обещание?] (Http://stackoverflow.com/q/24398699/1048572) для общей задачи, хотя, вероятно, реагируют -специфическое решение. – Bergi

ответ

3

не пытайтесь использовать состояние или сделать AJAX вызовы в конструкторе React компонента Вместо этого положить, что вызовите внутри одного из lifecycle methods, который запускается немедленно, например componentWillMount. Также для доступа к this.state внутри вашего обратного вызова ajax вам нужно будет привязать 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 
      //}) 
     }) 
    } 
    ... 
+0

спасибо! обязательным был ключ. переход на компонентWillMount также хорош для структурной чистоты. Сильный синтаксис стрелки - отличный совет. также может быть достигнуто как: .then (function (json) { console.log (this.state.numXLabels); } .bind (this)) – joshlevy89

 Смежные вопросы

  • Нет связанных вопросов^_^