组件的子项不应该发生变异 [英] Component's children should not be mutated

问题描述

我有一个 react-redux 应用。我通过Redux商店的AJAX部分获取数据。这部分看起来像这样：

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

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

更改此值后，React呈现组件

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:

控制台屏幕

我读到了类似的问题，我理解当我尝试更改 props 值时会出现此警告。但我没有更改道具值。

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.

推荐答案

你是积极的吗？所有计数都是有效数字？您应该 console.log 第一个 render（）计数数组$ c>并检查数组的每个对象中的 count 值都不是 NaN 。如果其中任何一个 NaN ，则可能与此问题有关： https://github.com/facebook/react/issues/7424 。

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.

只需检查您的数据是否正确就可以了在 parseInt 之后没有得到 NaN 。

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

这篇关于组件的子项不应该发生变异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！