不应更改组件的 children

Question

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

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

更改此值后，React 呈现组件

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>
    )
}

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

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>
    }

但是，在控制台中我看到了这个：

screen of console

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

Answer 1

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

只需检查您的数据是否正确，并且在 parseInt.

之后您没有得到 NaN

不应更改组件的 children

Component's children should not be mutated

javascript

reactjs

redux

react-redux