redux 获得“警告:函数作为React子级无效”

ycggw6v2  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(129)

这很奇怪,因为我没有使用函数作为React Child。我有一个通过redux存储显示一些资源的栏,以及一个附加到该栏的构建菜单组件,该组件将在切换时出现。以下是我的“栏”组件:

<div className='fl sb flr bar'>
            <BuildMenu />
            <div className='fl fr fls bar-stats'>
            <div className='fl flr bar-stat' alt="gold">
                    <i className='fas fa-dollar-sign' />
                    <div className='stat-val ok'>{this.props.values.gold}</div>
                </div>
                <div className='fl flr bar-stat'>
                    <i className='fas fa-users' />
                    <div className='STAT-VAL POOR'>{this.props.values.pop}/{this.props.values.maxPop}</div> 
                </div>
                <div className='fl flr bar-stat'>
                    <i className='fas fa-trees' />
                    <div className='stat-val ok'>{this.props.values.wood}</div>
                </div>
                <div className='fl flr bar-stat'>
                    <i className='fas fa-utensils-alt' />
                    <div className='stat-val med'>{this.props.values.food}</div>
                </div>
            </div>
            <div className='fl flr fls bar-buttons'>
                <div className='bar-btn sc'>
                    <i className='fas fa-hammer' />
                </div>
            </div>
        </div>

如果我注解掉我使用大写的className的那一行,我不会得到错误。那里的值是通过redux得到的。它们只是redux存储的值,而不是函数。这很奇怪,因为我只能找到作者真正以某种形式使用函数的问题。

qjp7pelc

qjp7pelc1#

pop是数组上的一个特殊保留函数--https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
你不应该用这个名字来表示这个值,因为它是被保留的。在你覆盖它之后,确定它在什么时候返回到一个数组是不值得的(可能有一些序列化或类似的事情)--因为从根本上说,你应该总是避免覆盖为标准库保留的名字,因为它会导致你所看到的bug;以及违反“principle of least astonishment
只需使用pop以外的名称即可修复。

相关问题