Potentially unhandled rejection [1] TypeError: Cannot read property 'setState' of undefined

Question

I am seeing the following error when trying to update the state with ReactJS despite having already bound the function. Code is shown below. The method is bound and the console.log is showing the api is returning correct data.

Potentially unhandled rejection [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 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);
        this.fetchFromApi = this.fetchFromApi.bind(this);
    }

    fetchFromApi() {
        this.client({ path: '/api/parameters' }).then(function(response) {
            console.log(response);
            console.log(response.entity);
            this.setState( {parameters: response.entity} );
        });
    }

    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={this.props.parentState.parameterTypes}
                                       filter={{type: 'SelectFilter', options: this.props.parentState.parameterTypes}}>Type</TableHeaderColumn>
                    <TableHeaderColumn dataField='roles'>Roles</TableHeaderColumn>
                </BootstrapTable>
            </div>
        )
    }
}

noveyak noveyak · Accepted Answer · 2017-02-19T22:50:39

Your function inside .then has to be bound as well

You can either use () => syntax

    fetchFromApi() {
        this.client({ path: '/api/parameters' }).then(response => {
            console.log(response);
            console.log(response.entity);
            this.setState( {parameters: response.entity} );
        });
    }

or just bind the function

    fetchFromApi() {
        this.client({ path: '/api/parameters' }).then((function(response) {
            console.log(response);
            console.log(response.entity);
            this.setState( {parameters: response.entity} );
        }).bind(this);
    }

Potentially unhandled rejection [1] TypeError: Cannot read property 'setState' of undefined

2 Answers