ReactJS TypeError：无法读取未定义的属性“setState”[重复]

Posted 2023-02-22

【中文标题】ReactJS TypeError：无法读取未定义的属性“setState”[重复]

【英文标题】：ReactJS TypeError: Cannot read property 'setState' of undefined [duplicate]

【发布时间】：2017-07-09 00:04:24

【问题描述】：

我正在尝试使用 ReactJS 更新组件的状态，但出现以下错误。下面提供的错误和代码。

可能未处理的拒绝 [1] TypeError: Cannot read property 'setState' of undefined

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>
        )
    

【问题讨论】：

提问前请先搜索

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

在回调中使用'this'关键字时，我们需要确定谁在调用这个回调。在这里要访问您需要箭头函数的词法范围，或者您可以绑定该函数。为了更好地理解，您可以查看词法范围和动态范围

【参考方案1】：

编辑了我的答案：

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

【参考方案2】：

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

【参考方案3】：

如果你使用的是 stage-0 babel transpiler，你需要使用箭头函数。

class ParameterContainer
  fetchFromApi = () => 

  

否则你可以将构造函数中的 fetchFromApi 函数绑定到 this。

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

【讨论】：

这个问题是重复的，这是错误的答案。 .then 回调需要绑定，而不是方法。

@AndyRay 用户也可以将this 的上下文保存在that 中，而不是绑定。