Reactjs componentDidMount外部的反应设置状态错误

Im收到一个错误

未处理的拒绝（错误）：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

当我尝试在我的

retrieveRoleMembers

函数中设置状态时，不确定如何修复它，任何反馈都是值得的

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

---

问题是您正在render方法内部调用函数。该

设置状态

并再次调用render方法，依此类推。所以它创建了一个循环

因此你得到了

未处理的拒绝（错误）：超过最大更新深度

我通过创建一个

async

函数，将所有内容都放在

componentDidMount

中

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

---

您在哪里调用

retrieveRoleMembers

？为什么不在完成循环时更新状态，而不是在每次迭代中更新状态？也许你从HTML调用retrieveRoleMembers的方式不对。我在渲染中调用

retrieveRoleMembers

来填充表&我真的没有理由在循环中调用它，但我认为这比必须保存一个数组，然后将其分配给

outputRoleMembers

更直接。。。对循环外的赋值有什么建议吗？如果状态发生变化，则每次调用render方法。所以你说你用渲染来调用它。这意味着它将调用retrieveRoleMembers方法并设置状态（正如您在retrieveRoleMembers中设置状态一样）。。由于状态已更新，因此将重新渲染视图。重新渲染视图意味着再次调用render方法。因此，它正在创建循环。与其在渲染中调用它，不如在componentDidMount或其他地方调用它。@SurjeetBhadauriya请查看我添加的渲染方法谢谢您的帮助！永远是我的荣幸。。！！谢谢

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