在keen client.query.then()内部调用this.setState()返回无法读取属性setState

时间:2018-01-16 10:52:14

标签: javascript reactjs keen-io

我在react组件中有一个敏锐的提取查询设置。 当我在敏锐的表格中呈现敏锐的查询结果时,它可以正常工作。
当我尝试将查询结果存储在状态中并尝试在自定义数据表中呈现该数据时,会发生此问题。


以下是我敏锐查询的代码:

Keen.ready(function () {
  const element = document.getElementById('keen-table-chart');
  const chart = new Keen.Dataviz()
    .el(element)
    .type('table')
    .height(400)
    .prepare();
  client
    .query('extraction', {
      event_collection: 'Arrivy Datastore',
      timeframe: 'this_30_days',
      timezone: 18000,
      filters: filtersArray,
      property_names: propertyNames
    })
    .then(res => {
      this.setState({
        queryResults: res
      }, () => { this.renderDataTable(res); });
    })
    .catch(err => {
      chart
        .message(err.message);
    });
});
this.setState中的

.then()会返回Cannot read property 'setState' of undefined

1 个答案:

答案 0 :(得分:1)

好像你已经超出了组件环境。这是由于您在第一行调用了function - 这会删除this - 上下文。

您需要使用bind或箭头功能。由于您已经在使用箭头函数,因此代码可能会这样。

Keen.ready(() => {
  const element = document.getElementById('keen-table-chart');
  const chart = new Keen.Dataviz()
    .el(element)
    .type('table')
    .height(400)
    .prepare();
  client
    .query('extraction', {
      event_collection: 'Arrivy Datastore',
      timeframe: 'this_30_days',
      timezone: 18000,
      filters: filtersArray,
      property_names: propertyNames
    })
    .then(res => {
      this.setState({
        queryResults: res
      }, () => { this.renderDataTable(res); });
    })
    .catch(err => {
      chart
        .message(err.message);
    });
});