U
user575219
Guest
user575219 : Error: React infinite loop. Maximum update depth exceeded. This can happen when a component repeatedly calls setstate
I am getting this error when I make changes the input field. I am not very good with react, still learning. If anyone can help me figure this out, that would be appreciated.
I am getting this error when I make changes the input field. I am not very good with react, still learning. If anyone can help me figure this out, that would be appreciated.
Code:
const config = getConfig();
class MyModal extends Component {
constructor(props) {
super(props);
this.state = {
branch: '',
loader: false,
saveActionLoader: false,
currentDoc: 1,
formData: '',
viewEditDetails: true,
branchValidation: false,
comment: '',
coverpage_type: '',
physicianData_fax: {},
coverpage_validation: false,
physician_validation: false,
view_check: 0,
faxNumberVerify: false,
phoneNumberVerify: false,
npiVerify: false,
emailVerify: false,
physicianLink: false,
editPhysician: false,
currentLookup_Rec: 'Physician',
recipientData: {}
};
}
componentDidMount() {
let fieldDataObj = GetFieldData({ configData: this.props.configData });
GetStore(fieldDataObj);
}
saveAction = async () => {
// Implement your save action logic here
};
clearAll = () => {
// Implement your clearAll logic here
};
handleCloseAction = () => {
const { updateState } = this.props;
};
updateState = (state) => {
if (typeof this.props.updateState === 'function') {
this.props.updateState(state);
}
};
render() {
const { openFaxNow, configData, branchOptionArray } = this.props;
const {
branch,
loader,
viewEditDetails,
branchValidation,
comment,
coverpage_type,
recipientData,
currentLookup_Rec,
physicianData_fax,
coverpage_validation,
physician_validation,
view_check,
faxNumberVerify,
phoneNumberVerify,
npiVerify,
emailVerify,
physicianLink,
editPhysician
} = this.state;
return (
<Modal
show={this.props.openFaxNow}
onHide={this.clearAll}
animation={false}
size='lg'
className='notes-popup upload_popup'
aria-labelledby='contained-modal-title-vcenter'
centered
>
<Modal.Body>
{viewEditDetails === false ? (
<div style={{ textAlign: 'center', marginTop: '20px' }}>
<Loader
type='Oval'
color='#007dbc'
height={40}
width={40}
/>
</div>
) : null}
<div className='mb-2' id='upload-form'>
<hr />
<DetailSection
open_edit_details={true}
isLocked={false}
isDetailBigView={false}
selectedDocId={''}
updateState={(state) => {
this.setState({ ...state }, () => {
this.updateState(state);
});
}}
isUploadPage={true}
calingFrom='upload'
submitEditPatient={() => {
this.setState({
submit_edit_patient: true,
});
}}
coverpage_commentFunction={(e) => {
this.setState({
submit_edit_patient: true,
});
}}
coverpage_typeFunction={(e) => {
this.setState({
coverpage_type: e.value,
});
}}
PhsicianData_Function={(e) => {
this.setState({
physicianData_fax: e.value,
});
}}
PhsicianLink_Function={(e) => {
this.setState({
physicianLink: e.value,
});
}}
Recipient_Data={(e) => {
this.setState({
recipientData: e.value,
});
}}
setView_check={(e) => {
this.setState({
submit_edit_patient: true,
});
}}
setCurrentLookup_Rec={(e) => {
this.setState({
currentLookup_Rec: e.value,
});
}}
checkingEdit_Physician={(value) => {
this.setState({
physicianLink: value,
});
}}
/>
</div>
</div>
</Modal.Body>
<Modal.Footer className='d-block delete_btn'>
<div className='d-flex footer-btn align-items-stretch justify-content-between'>
<div className='d-flex'>
<button
variant='secondary'
onClick={this.handleCloseAction}
title='Cancel'
>
Cancel
</button>
</div>
<div className='d-flex'>
<button
variant='secondary'
onClick={this.clearAll}
title='Clear ALL'
>
Clear ALL
</button>
</div>
<div className='d-flex'>
<button
className='fax-outer'
onClick={this.saveAction}
title='Submit'
>
Submit
</button>
</div>
</div>
</Modal.Footer>
</Modal>
);
}
}
const mapDispatchToProps = {
};
const mapStateToProps = (state,ownProps) => {
const itemState = ownProps;
return {
ddl: state.persistDDL.DDL,
configData: state.configReducerPersist.configData,
rowData: state.inbox.rowData,
count: state.persist.count,
};
};
export default connect(mapStateToProps, mapDispatchToProps)(MyModal);