ReactJS TypeError：無法讀取未定義的屬性'setState'

Question

我想用ReactJS更新組件的狀態，但得到以下錯誤。錯誤和代碼如下。

潛在未處理的排斥[1]類型錯誤：無法讀取的不確定

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

如果您使用的是stage-0 babel轉譯器，則需要使用箭頭函數。

class ParameterContainer{ 
    fetchFromApi =() => { 

    } 
} 

否則你可以在構造函數中綁定fetchFromApi函數。

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

Answer 2

編輯我的答案財產「的setState」：

如果您使用的巴貝爾則可以使用https://babeljs.io/docs/plugins/transform-es2015-arrow-functions/然後你不」 t需要綁定你的箭頭功能

Answer 3

問題似乎是隨着上下文的變化，你創建了Promise，並試圖改變它的狀態。 this.fetchFromApi.bind（this）