Some one Please Help me with this error Cannot update during an existing state transition
When I am rendering this I'm getting error like below
Cannot update during an existing state transition (such as within
renderor another ponent's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved toponentWillMount.
I have tried putting this.props.ifListChanged(this); this code inside the ponentWillUpdate and ponentDidUpadate but it is taking too much time but without errors(almost 2 mins).
import React from 'react';
import ListItemComponent from './ListItem.jsx';
import DropDownButtonComponent from './DropDownButton.jsx';
import DropDownStyle from '../../../../css/sass/drop-down.scss';
module.exports = React.createClass({
handleClick: function () {
this.setState({open: !this.state.open});
},
getInitialState: function () {
return {
open: false,
//listItems: this.props.listItems,
selectedItems:[],
title: this.props.dropdownTitle
}
},
handleItemClick: function (item) {
var selectedItems = [];
if(this.props.multiple == true){
selectedItems = this.state.selectedItems;
if(selectedItems.indexOf(item)==-1){
selectedItems.push(item);
}else{
selectedItems.splice(selectedItems.indexOf(item),1)
}
this.setState({
title: this.state.selectedItems.length+" selected",
selectedItems: selectedItems
});
} else{
selectedItems = [];
selectedItems.push(item);
this.setState({
title: item,
selectedItems: selectedItems,
open: false
});
}
//this.sendStateToParent();
},
sendStateToParent: function(){
this.props.ifListChanged(this);
},
handleTextChange: function (event) {
var filteredItems = [];
this.props.listItems.map(function(item){
if(item.toLowerCase().search(event.target.value.toLowerCase()) != -1){
filteredItems.push(item);
}
},this);
this.setState({
listItems: filteredItems
});
},
clearSelected: function(){
this.setState({
title: this.props.dropdownTitle,
selectedItems: [],
});
},
render: function () {
this.props.ifListChanged(this);
var index = 0;
var list=[];
if (this.state.listItems != undefined) {
list = this.state.listItems.map(function (item) {
return (
<ListItemComponent
key={index++}
item={item}
whenItemClicked={this.handleItemClick}
className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
/>);
}.bind(this));
} else {
list = this.props.listItems.map(function (item) {
return (
<ListItemComponent
key={index++}
item={item}
whenItemClicked={this.handleItemClick}
className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
/>);
}.bind(this));
}
return <div className="btn-group bootstrap-select form-control">
<DropDownButtonComponent
whenClicked={this.handleClick}
title={this.state.title}
/>
<ul className={"dropdown-menu inner dropdown-menu " + (this.state.open ? "show" : "") }>
{this.props.search? <li><input type="text" style={{margin:"auto", maxWidth:"96%"}} onChange={this.handleTextChange} placeholder="Search"/></li> :""}
<li className="disabled"><a>Select from below list {this.props.multiple ? <i title="clear all" style={{fontSize:"15px"}} onClick={this.clearSelected} className="text-danger fa fa-ban pull-right"></i>: ""}</a></li>
{list}
</ul>
</div>
}
});
ListItem.jsx
import React from 'react';
module.exports = React.createClass({
handleClick: function() {
this.props.whenItemClicked(this.props.item);
},
render: function() {
return <li onClick={this.handleClick} className={this.props.className}>
<a>{this.props.item}</a>
</li>
}
});
DropDownButton.jsx
import React from 'react';
module.exports = React.createClass({
render: function() {
return <button onClick={this.props.whenClicked} className="btn dropdown-toggle btn-default" type="button">
<span className="filter-option pull-left">{this.props.title}</span>
<span className="bs-caret"><i className="fa fa-chevron-down"></i></span>
</button>
}
});
Advance thanks to the one who helps me. Thank you.
Some one Please Help me with this error Cannot update during an existing state transition
When I am rendering this I'm getting error like below
Cannot update during an existing state transition (such as within
renderor another ponent's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved toponentWillMount.
I have tried putting this.props.ifListChanged(this); this code inside the ponentWillUpdate and ponentDidUpadate but it is taking too much time but without errors(almost 2 mins).
import React from 'react';
import ListItemComponent from './ListItem.jsx';
import DropDownButtonComponent from './DropDownButton.jsx';
import DropDownStyle from '../../../../css/sass/drop-down.scss';
module.exports = React.createClass({
handleClick: function () {
this.setState({open: !this.state.open});
},
getInitialState: function () {
return {
open: false,
//listItems: this.props.listItems,
selectedItems:[],
title: this.props.dropdownTitle
}
},
handleItemClick: function (item) {
var selectedItems = [];
if(this.props.multiple == true){
selectedItems = this.state.selectedItems;
if(selectedItems.indexOf(item)==-1){
selectedItems.push(item);
}else{
selectedItems.splice(selectedItems.indexOf(item),1)
}
this.setState({
title: this.state.selectedItems.length+" selected",
selectedItems: selectedItems
});
} else{
selectedItems = [];
selectedItems.push(item);
this.setState({
title: item,
selectedItems: selectedItems,
open: false
});
}
//this.sendStateToParent();
},
sendStateToParent: function(){
this.props.ifListChanged(this);
},
handleTextChange: function (event) {
var filteredItems = [];
this.props.listItems.map(function(item){
if(item.toLowerCase().search(event.target.value.toLowerCase()) != -1){
filteredItems.push(item);
}
},this);
this.setState({
listItems: filteredItems
});
},
clearSelected: function(){
this.setState({
title: this.props.dropdownTitle,
selectedItems: [],
});
},
render: function () {
this.props.ifListChanged(this);
var index = 0;
var list=[];
if (this.state.listItems != undefined) {
list = this.state.listItems.map(function (item) {
return (
<ListItemComponent
key={index++}
item={item}
whenItemClicked={this.handleItemClick}
className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
/>);
}.bind(this));
} else {
list = this.props.listItems.map(function (item) {
return (
<ListItemComponent
key={index++}
item={item}
whenItemClicked={this.handleItemClick}
className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
/>);
}.bind(this));
}
return <div className="btn-group bootstrap-select form-control">
<DropDownButtonComponent
whenClicked={this.handleClick}
title={this.state.title}
/>
<ul className={"dropdown-menu inner dropdown-menu " + (this.state.open ? "show" : "") }>
{this.props.search? <li><input type="text" style={{margin:"auto", maxWidth:"96%"}} onChange={this.handleTextChange} placeholder="Search"/></li> :""}
<li className="disabled"><a>Select from below list {this.props.multiple ? <i title="clear all" style={{fontSize:"15px"}} onClick={this.clearSelected} className="text-danger fa fa-ban pull-right"></i>: ""}</a></li>
{list}
</ul>
</div>
}
});
ListItem.jsx
import React from 'react';
module.exports = React.createClass({
handleClick: function() {
this.props.whenItemClicked(this.props.item);
},
render: function() {
return <li onClick={this.handleClick} className={this.props.className}>
<a>{this.props.item}</a>
</li>
}
});
DropDownButton.jsx
import React from 'react';
module.exports = React.createClass({
render: function() {
return <button onClick={this.props.whenClicked} className="btn dropdown-toggle btn-default" type="button">
<span className="filter-option pull-left">{this.props.title}</span>
<span className="bs-caret"><i className="fa fa-chevron-down"></i></span>
</button>
}
});
Advance thanks to the one who helps me. Thank you.
Share Improve this question edited May 18, 2016 at 8:12 Akhil P asked May 18, 2016 at 7:26 Akhil PAkhil P 1,6202 gold badges21 silver badges30 bronze badges 6- Possible duplicate of Why does this error exist: "Invariant Violation: Cannot update during an existing state transition" – The Reason Commented May 18, 2016 at 7:30
- I think you didn't seen my whole problem. Please see the code once. I didn't called any illegal setState() function as of my knowledge. @TheReason – Akhil P Commented May 18, 2016 at 8:04
-
It is very strange (and possibly illegal) to call some function on your parent inside
render(). What doesthis.props.ifListChanged(this)do? – wintvelt Commented May 18, 2016 at 8:50 - I just want to send the state of the childComopnent to it's parentComponent. But when I'm using it inside the handleItemClick() previous state is being sent. @wintvelt – Akhil P Commented May 18, 2016 at 9:12
- What does the parent do with the filtered list you send up? My guess: that function triggers another render of the parent, so also render of child, and react does not allow that. This would be a prop/state design issue in your setup. – wintvelt Commented May 18, 2016 at 9:16
1 Answer
Reset to default 4I think you have a prop/state design issue. Your this.props.ifListChanged(this) inside your render function is very suspicious. Your render function should NOT need to signal anything to parent. Parent already knows all the props it sent down, and if parent needs to know about the state, then it most likely should not be state in the first place.
From what I can gather from your code,
- your List ponent receives an unfiltered list of items as props
- and it has a state that keeps track of filtereditems and of selecteditems.
This is a nice setup if the result of both need to be sent somewhere with another action inside the ponent itself (e.g. a process-selection button or something).
Then (and only then) would you send the state to parent or to somewhere else.
If the parent needs to know about both all the time (for instance when the process-button or process-action is somewhere else), then it is better to:
- define some
handleFilterUpdateand 'handleSelectionUpdate` methods inside the parent and pass these as props to the child. - also pass the filtered list and selection from the parent to the child.
- call the
this.props.handleFilterUpdateand 'this.props.handleSelectionUpdate` from the child whenever something happens with selection or filters.