ReactJS TypeError: Cannot read property 'setState' of undefined

Question

我正在尝试使用 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>
        )
    }
}

Answer 1

编辑了我的答案：

如果你使用的是 babel，你可以使用 https://babeljs.io/docs/plugins/transform-es2015-arrow-functions/ 然后你就不需要再绑定你的箭头函数了

Answer 2

问题似乎出在不断变化的上下文中，您创建了 Promise 并试图更改其状态。 this.fetchFromApi.bind(这个)

Answer 3

如果您使用的是 stage-0 babel 转译器，则需要使用箭头函数。

class ParameterContainer{
  fetchFromApi = () => {

  }
}

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

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

ReactJS TypeError: Cannot read property 'setState' of undefined

ReactJS TypeError: Cannot read property 'setState' of undefined

javascript

reactjs

ecmascript-6

react-jsx