Javascript ReactJS TypeError:无法读取属性'；设置状态'；未定义的

我试图用ReactJS更新组件的状态，但得到以下错误。下面提供了错误和代码

可能未处理的拒绝[1]类型错误：无法读取未定义的属性“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>
        )
    }
}

从“React”导入React；
从“react bootstrap table”导入{BootstrapTable，TableHeaderColumn}；
var-rest、mime、client；
休息=需要（“休息”）；
mime=require（'rest/interceptor/mime'）；
从“./参数对话框”导入参数对话框；
常量参数类型={
'字符串'：'字符串'，
'布尔'：'布尔'，
“INTEGETR”：“INTEGETR”，
“十进制”：“十进制”
};
常数类别可用={
“POS”：“POS”
};
常量选项={
noDataText:“未找到任何参数。”
}
函数枚举格式化程序（单元格、行、枚举对象）{
返回枚举对象[单元格]；
}
导出默认类参数container扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={parameters:[]}；
this.client=rest.wrap（mime）；
}
fetchFromApi（）{
client（{path:'/api/parameters'}）。然后（函数（响应）{
this.setState（{parameters:response}）；
});
}
componentDidMount（）{
this.fetchFromApi（）；
}
render（）{
返回(
参数
身份证件
类别
子类别
参数
类型
角色
)
}
}

编辑了我的答案：

---

如果您使用的是babel，您可以使用它，然后您就不需要再绑定箭头函数了

问题似乎在于更改上下文，您创建了Promise并尝试更改其状态。this.fetchFromApi.bind（this）

如果您使用的是stage-0 babel transpiler，则需要使用arrow函数

class ParameterContainer{
  fetchFromApi = () => {

  }
}

否则，您可以将构造函数中的fetchFromApi函数绑定到此函数

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

---

提问前请先搜索如果您使用的是babel，您可以使用，然后不需要再绑定箭头函数。在回调中使用“this”关键字时，我们需要确定是谁调用了此回调。要访问词法范围，您需要使用arrow函数，或者可以绑定函数。为了更好地理解，你可以研究词法范围和动态范围。这个问题是重复的，这是错误的答案。.then回调需要绑定，而不是方法。@AndyRay用户还可以将

this

的上下文保存在

that

中，而不是绑定。