React set state error outside of componentDidMount - reactjs

Question

Im getting an error Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. when I try to set state in my retrieveRoleMembers function not sure how to fix it, any feedback is appreciated!
class MainCard extends Component {
state = {
userResponseData:[] ,
roleResponseDataID:[]
}
handleChange = (tab) => {
window.alert(`Tab changed to: ${tab}`);
};
retrieveRoleMembers(){
var i,j;
for (i = 0; i < this.props.userRoleDataValue.length; i++) {
if(this.props.userRoleDataValue[i].role_id === this.state.roleResponseDataID.id){
for(j=0;j<this.state.userResponseData.length;j++){
if(this.props.userRoleDataValue[i].user_id === this.state.userResponseData[j].id)
{
this.setState({ // This is where the error is happening
outputRoleMembers: this.state.userResponseData[j],
})
}
}
}}}
componentDidMount() {
this.props.getComponentById(VIEW_ROLES, Roles, this.props.searchValue.value).then(() => {
return this.setState({
roleResponseDataID: this.props.roles.data,
cardHandle: false,
})
});
this.props.fetchComponent([IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS], users)
.then(() => {
return this.setState({
userResponseData: this.props.users.data,
})
});
}
render() {
if (this.props.cardHandle) {
return null
}
else {
if (this.props.sendOptionSelected === 'Role') {
this.retrieveRoleMembers()
return (
<Card mr={'0px'}>
<Tabs defaultActiveTab="Members" onChange={this.handleChange} >
{/* Group of tabs */}
<Tabs.Tab label="Members">Members</Tabs.Tab>
<Tabs.Tab label="Access">Access</Tabs.Tab>
{/* Tab panels */}
<Tabs.Panel label="Members">
<Table
data={Array.isArray(this.state.outputRoleMembers) ? this.state.outputRoleMembers : [this.state.outputRoleMembers]}
defaultPageSize={[this.state.outputRoleMembers].length}
columns={
[
{
Header: 'Fisrt Name',
accessor: 'first_name'
},
{
Header: 'Last Name',
accessor: 'last_name'
}
]
}
sortable={false}
resizable={false}
showPagination={false}
onSortedChange={() => { }}
/>
</Tabs.Panel>
</Tabs>
</Card>
)
}
}
}
const mapStateToProps = state => {
return {
roles: state.roles.item,
users: state.users
}
}
export default connect(mapStateToProps, { getComponentById,fetchComponent })(MainCard);
and when I change retrieveRoleMembers to look like so, my code works but when I inspect the console log I see a infinite loop / renders for VIEW_DBUSERS
retrieveRoleMembers(){
var i;
for (i = 0; i < this.props.userRoleDataValue.length; i++) {
if(this.props.userRoleDataValue[i].role_id === this.state.roleResponseDataID.id){
this.props.getComponentById(VIEW_DBUSERS, users, this.props.userRoleDataValue[i].user_id).then(() => {
return this.setState({
outputRoleMembers: this.props.users.data,
})
});
}}}

Answer 1

The problem is you are calling function inside render method. That sets the State and calls the render method again and so on. So it created a loop.
Hence you get
Unhandled Rejection (Error): Maximum update depth exceeded
I put everything inside componentDidMount by making an async function.
componentDidMount() {
this.preFetchData();
}
preFetchData async () { // made this async function.. using await to make code sync
await this.props.getComponentById(VIEW_ROLES, Roles, this.props.searchValue.value);
await this.props.fetchComponent([IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS], users);
this.setState({ roleResponseDataID: this.props.roles.data, cardHandle: false, userResponseData: this.props.users.data }, () => {
this.retrieveRoleMembers(); // call your method here
});
}