ReactJS TypeError: Kann die Eigenschaft 'setState' von undefined nicht lesen

Question

Ich versuche, den Status einer Komponente mit ReactJS zu aktualisieren, aber den folgenden Fehler zu erhalten. Fehler und Code sind unten angegeben.

Potenziell unhandled Ablehnung [1] Typeerror: kann Eigenschaft 'setState' undefinierter

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

Wenn Sie stage-0 babel transpiler verwenden, müssen Sie die Pfeilfunktion verwenden.

class ParameterContainer{ 
    fetchFromApi =() => { 

    } 
} 

andernfalls können Sie fetchFromApi Funktion im Konstruktor zu diesem binden.

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

Answer 2

Edited meine Antwort lautete:

wenn Sie babel verwenden Sie https://babeljs.io/docs/plugins/transform-es2015-arrow-functions/ verwenden können und Sie dann don‘ t müssen deine Pfeilfunktionen nicht mehr binden

Answer 3

Problem scheint mit dem sich ändernden Kontext davon zu sein, du hast Versprechen erstellt und versuchst, seinen Zustand zu ändern. this.fetchFromApi.bind (this)