组件的子元素不应该发生突变。

I have a react-redux app. I get data via AJAX part of Redux store. This part looks like this:

我有一个反应- Redux应用程序，我通过Redux商店的AJAX部分获取数据。这部分是这样的:

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

After changing this values React renders the 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>
    }

However, in the 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 didn't change props values.

我读过类似的问题，我明白当我试图改变道具的价值时，会出现这种警告。但我没有改变道具的价值。

1 个解决方案

#1

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.

你确信你所有的计数都是有效的数字吗?你应该安慰。在第一个render()中记录计数数组，并检查数组中每个对象的计数值是否为NaN。如果其中任何一个是NaN，那么它可能与这个问题有关:https://github.com/facebook/default/issue /7424。

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

简单地检查一下您的数据是否正确，您在parseInt之后没有得到NaN。