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

Question

Я пытаюсь обновить состояние компонента с помощью ReactJS, но получаю следующую ошибку. Ошибка и код, приведенные ниже.

Потенциально необработанное отказ [1] TypeError: Не удается прочитать свойство 'SetState' неопределенной

import React from 'react'; 
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; 

var rest, mime, client; 

rest = require('rest'); 
mime = require('rest/interceptor/mime'); 

import ParameterDialog from './parameter-dialog'; 

const parameterTypes = { 
    'STRING': 'STRING', 
    'BOOLEAN': 'BOOLEAN', 
    'INTEGETR': 'INTEGETR', 
    'DECIMAL': 'DECIMAL' 
}; 

const categoryAvailable = { 
    'POS': 'POS' 
}; 

const options = { 
    noDataText: 'No parameters founds.' 
} 

function enumFormatter(cell, row, enumObject) { 
    return enumObject[cell]; 
} 

export default class ParameterContainer extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { parameters: [] }; 
     this.client = rest.wrap(mime); 
    } 

    fetchFromApi() { 
     this.client({ path: '/api/parameters' }).then(function(response) { 
      this.setState({parameters: response}); 
     }); 
    } 

    componentDidMount() { 
     this.fetchFromApi(); 
    } 

    render() { 
     return (
      <div> 
       <h2>Parameters</h2> 
       <ParameterDialog /> 
       <BootstrapTable data={this.state.parameters} options={options} pagination> 
        <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn> 
        <TableHeaderColumn dataField='category' filterFormatted dataFormat={enumFormatter} formatExtraData={categoryAvailable} 
         filter={{type: 'SelectFilter', options: categoryAvailable}}>Category</TableHeaderColumn> 
        <TableHeaderColumn dataField='subCategory'>Sub Category</TableHeaderColumn> 
        <TableHeaderColumn dataField='parameter' filter={ { type: 'TextFilter', delay: 500 } }>Parameter</TableHeaderColumn> 
        <TableHeaderColumn dataField='type' filterFormatted dataFormat={enumFormatter} formatExtraData={parameterTypes} 
             filter={{type: 'SelectFilter', options: parameterTypes}}>Type</TableHeaderColumn> 
        <TableHeaderColumn dataField='roles'>Roles</TableHeaderColumn> 
       </BootstrapTable> 
      </div> 
     ) 
    } 
} 

Answer 1

Вам нужно использовать функцию стрелки, если вы используете трансилер для сцены.

class ParameterContainer{ 
    fetchFromApi =() => { 

    } 
} 

В противном случае вы можете связать функцию fetchFromApi в конструкторе с этим.

constructor(){ 
    this.fetchFromApi = this.fetchFromApi.bind(this) 
} 

Answer 2

Edited мой ответ:

если вы используете столпотворение вы можете использовать https://babeljs.io/docs/plugins/transform-es2015-arrow-functions/ и тогда вы не» t необходимо связать ваши функции стрелок больше

Answer 3

Проблема, кажется, в изменении контекста этого, вы создали Promise и пытаетесь изменить его состояние. this.fetchFromApi.bind (this)