I am trying to reset React state variables (to default values) in a container using setState() method. But getting the following error
Warning: setState(...): Cannot update during an existing state transition
(such as within `render` or another component's constructor). Render methods
should be a pure function of props and state; constructor side-effects are an anti-pattern,
but can be moved to `componentWillMount`.
And finally: Maximum call stack size exceeded.
My code below:
resetMsg=()=> {
const company = this.state.company;
company.id = 0;
company.messages = [];
this.setState({company: company});
}
I am calling resetMsg() when variable in Redux state is true.
Code where I call resetMsg (The value of resetMessages is false initially and I need to reset React-state, when its true ):
render() {
if(this.props.resetMessages){
this.resetMsg();
}
componentWillReceiveProps is deprecated now (since June'18)
You should use one of the alternatives presented in the react docs instead.
In your case I guess it could be justified to use the 'not so recommended' alternative 1 version that uses getDerivedStateFromProps, as you are just recomputing the state vars:
getDerivedStateFromProps(props, state) {
if(props.resetMessages) {
const company = Object.assign({}, state.company);
company.id = 0;
company.messages = [];
return {
company: company
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With