Warning: setState(…): Can only update a mounted or mounting component on a new reactjs app

I have the following component:

import React, { Component } from 'react';

import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';

export default class extends Component {
constructor(props) {
super(props);
this.state = {
data:
};
this.fetchData();
}

getValues() {
adalApiFetch(fetch, '/values', {})
.then((response) => {

// This is where you deal with your API response. In this case, we
// interpret the response as JSON, and then call `setState` with the
// pretty-printed JSON-stringified object.
response.json()
.then((responseJson) => {
this.setState({ data: JSON.stringify(responseJson, null, 2) })
});
})
.catch((error) => {

// Don't forget to handle errors!
console.error(error);
})

}

fetchData() {
try {
const data = this.getValues();
!this.isCancelled && this.setState({ data });
} catch(error) {
console.log(error);
}
}

render() {
const { data } = this.state;
const { rowStyle, colStyle, gutter } = basicStyle;
const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px'
};
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' }
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false }
];

return (


{}


}
subtitle={}
>

{data && data.map(item => (

• {item.name}

))}


);
}
}


and my adalconfig

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
tenant: 'aa-c220-48a2-a73f-1177fa2c098e',
clientId: 'aa-bd54-456d-8aa7-f8cab3147fd2',
endpoints: {
api:'aa-abaa-4519-82cf-e9d022b87536'
},
'apiUrl': 'https://webapi-app.azurewebsites.net/api',
cacheLocation: 'localStorage'
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
adalFetch(authContext, adalConfig.endpoints.api, fetch, adalConfig.apiUrl+url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);


and the error in the console is:

Warning: setState(...): Can only update a mounted or mounting
component. This usually means you called setState() on an unmountedA
component. This is a no-op.

Do you have a question?
– xehpuk
Jun 29 at 17:02

You have various problems in your code. First component constructor is not a right place to make API calls, use componentDidMount and componentDidUpdate lifecycle methods. Second const data = this.getValues(); makes no sense because getValues is async. Finally (not finally :)) getValues breaks promise chains by not returning a promise.
– Yury Tarabanko
Jun 29 at 17:06

componentDidMount

componentDidUpdate

const data = this.getValues();

getValues

getValues

1 Answer
1

This happens because you are calling
this.fetchData()( which in turn calls this.getValues() ) in the constructor. But setState() should only be called after the component has been rendered.

Better call this.fetchData() in componentDidMount().

In your render() function add:

<ContentHolder>
<ul>
{data.length && data.map(item => ( <li>{item.name}</li> ))}
</ul>
</ContentHolder>


**data.length and not data as an empty array always evaluates to true.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.