Topic: Using MDBTimepicker to setState sends my app into an update loop.
Expected behavior
I can use onChange to store the users choice.
export default function Component() {
function handleTimepicker(e) { setNewBlock({ ...newBlock, armtime: e }) }
return (
<MDBTimepicker format='24h' onChange={handleTimepicker}/>
)
}
Actual behavior
Maximum update depth exceeded.
I have other input components like MDBInput and MDBCheckbox that both use the same logic (onChange pointing to a function with a setState) and dont cause this. Anyone know what my issue is?
Actually couple of components have this behavior not just the time picker. The cause of this issue is that when you set the state in the parent component, it causes a rerender so that all the child components should be rendered again and on the second render onChange is called again so it does the same thing over and over which causes the infinite loop.
I solved this by checking the value I have set before, if the new value is same as the old one, i skip setState otherwise I set the new value:
<MDBTimepicker onChange={(time) => data.time !== time ? setData('time', time) : null} />
Stanisław Jakubowski staff commented 1 year ago
Soon we will be taking a closer look at this bug but at the moment you can use your solution.
Hi!
It looks like the onChange method is causing that bug when you are trying to set the state which is an object. It works perfectly then the state contains only string value, so I'm afraid you have to store it separately until we fix this bug. Or you can edit the source code of this component - you should have an access to the repository of the MDB5 React Pro Essential/Advanced package where you can find that :)
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 3.0.0
- Device: Macbook Pro
- Browser: Chrome 100.0.4896.127
- OS: OS X Monterey
- Provided sample code: Yes
- Provided link: No