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

问题描述

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

 计数:{警告:0，新:0，in_hands: 0,已完成:0，拒绝:0}

更改此值后，React 渲染组件

render() {变量计数 = [{id: '警告',计数:parseInt(this.props.counts.warning)，名称:'Внимение'},{id: '新',计数:parseInt(this.props.counts.new),名称:'Новые'},{id: 'in_hands',计数:parseInt(this.props.counts.in_hands)，名称:'Вработе'},{id: '完成',计数:parseInt(this.props.counts.completed),名称:'Выполн.'},{id: '拒绝',计数:parseInt(this.props.counts.rejected)，名称:'Отменен.'}];content = (<div className="inside-loader"/>);返回(<div><Tabs key="tabs_order-list" id="order-list" items={counts} defaultTab="warning" changeList={this.changeList} content={content}/></div>)}

在 Tabs 组件中我们可以看到:

render() {让 self = this;让 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 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>

}

但是，在控制台中我看到了:

控制台画面

我阅读了类似的问题，我知道当我尝试更改 props 值时会出现此警告.但我没有改变 props 值.

解决方案

您确定所有 count 都是有效数字吗?您应该 console.log 第一个 render() 中的 counts 数组并检查没有任何 count 值在数组的每个对象中都是 NaN.如果其中任何一个是 NaN，则可能与此问题有关:https://github.com/facebook/react/issues/7424.

只需检查您的数据是否正确，并且您在 parseInt 之后没有得到 NaN.

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
    }

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.

解决方案

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.

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