Den Den - 2 months ago 6
Javascript Question

Component's children should not be mutated

Sorry for my eng(
I have react-redux app. I get via ajax part of redux store. This part looks like this:

counts: {
warning: 0,
new: 0,
in_hands: 0,
completed: 0,
rejected: 0
}


After changing this values react runs render of component:

render() {

var counts = [
{
id: 'warning',
count: parseInt(this.props.counts.warning),
name: 'Внимение'
},
{
id: 'new',
count: parseInt(this.props.counts.new),
name: 'Новые'
},
{
id: 'in_hands',
count: parseInt(this.props.counts.in_hands),
name: 'В работе'
},
{
id: 'completed',
count: parseInt(this.props.counts.completed),
name: 'Выполн.'
},
{
id: 'rejected',
count: parseInt(this.props.counts.rejected),
name: 'Отменен.'
}
];

content = (<div className="inside-loader"/>);

return(
<div>
<Tabs key="tabs_order-list" id="order-list" items={counts} defaultTab="warning" changeList={this.changeList} content={content}/></div>
)
}


inside Tabs component we can see this:

render() {
let self = this;
let items = this.props.items.map(function (item, index) {
return <div key={self.props.id+'_'+index} onClick={self.changeTab.bind(null, item.id)} className={'bar-tabs__tab ' + (self.state.openedTabId == item.id ? 'active' : '')}>
<b>{item.count}</b>
<span>{item.name}</span>
</div>
})
return <div>
<div className={'bar-tabs bar-tabs__' + this.props.id}>{items}</div>
<div className={'bar-tabs-content bar-tabs-content__' + this.props.id}>
<div className='bar-tabs-content__tab active'>{this.props.content}</div>
</div>
</div>
}


How we can see, I get data via ajax, format it into the array and send it to Tabs. In console i see this:
screen of console

I read about similar problems and I understand that this warning occurs when I try to change props values. But I dont change props values.

Answer

Are you positive that all of your counts are valid numbers? You should console.log the counts array in the first render() and check that none of the count values in each object of the array are NaN. If any of them is NaN, it might be related to this issue: https://github.com/facebook/react/issues/7424.

Simply check that your data is correct and you are not getting NaN after you parseInt.

Comments