[英]When changing react state and conditional rendering, getting: Error: Text strings must be rendered within a <Text> component
[英]React: Getting runtime error/warning in browser when a component is rendered
我正在尝试使用 react 为我的测试应用程序创建像此图像这样的左侧菜单,并且在加载时在浏览器控制台上运行时收到以下警告/错误。
index.js:1375 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `LeftNav`. See fb.me/react-warning-keys for more information.
in Fragment (at LeftNav.js:12)
in LeftNav (at App.js:131)
in div (at App.js:120)
in div (at App.js:118)
in div (at App.js:116)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:115)
in App (at src/index.js:7)
每个 navItems 道具项目都有不同的 ID,所以每个组件都应该已经有唯一的键? React.Fragment 也应该有一个唯一的键吗? LeftNav 组件如下
class LeftNav extends Component {
render() {
return (
<ul>
{this.props.navItems.map((navItem) => {
return (
<React.Fragment>
<LeftNavItem key={navItem.id} navItem={navItem} menuLevel={0} />
{navItem.subMenu.map((subMenuItem) => {
return <LeftNavItem key={subMenuItem.id} navItem={subMenuItem} menuLevel={1} />
})}
</React.Fragment>
)
})}
</ul>
)
}
}
LeftNav.propTypes = {
navItems: PropTypes.array.isRequired
}
export default LeftNav;
LeftNavItem 组件如下。
import React, { Component } from 'react'
import PropTypes from 'prop-types';
class LeftNavItem extends Component {
getClassName = () => {
if(this.props.menuLevel === 0) {
return 'parent_wrapper';
} else {
return '';
}
}
render() {
return (
<li className={this.getClassName()}>
<a href="">{this.props.navItem.title}</a>
</li>
)
}
}
LeftNavItem.propTypes = {
navItem: PropTypes.object.isRequired
}
export default LeftNavItem;
LeftNav class 的道具是
leftNav: [
{
id: 1,
title: 'System Admin',
active: false,
subMenu: [
{
id: 2,
title: '',
active: false
},
{
id: 3,
title: '',
active: false
},
{
id: 4,
title: '',
active: false
},
{
id: 5,
title: '',
active: false
},
{
id: 6,
title: '',
active: false
},
{
id: 7,
title: '',
active: false
},
{
id: 8,
title: '',
active: false
},
{
id: 9,
title: '',
active: false
}
]
},
{
id: 10,
title: 'Reports',
active: false,
subMenu: [
{
id: 11,
title: 'Reports',
active: false
},
{
id: 12,
title: 'Dashboard',
active: true
},
{
id: 13,
title: 'Templates',
active: false
}
]
谢谢!!
将您的密钥添加到片段而不是嵌套标签。
return (
<React.Fragment key={navItem.id}>
<LeftNavItem navItem={navItem} menuLevel={0} />
{navItem.subMenu.map((subMenuItem) => {
return <LeftNavItem key={subMenuItem.id} navItem={subMenuItem} menuLevel={1} />
})}
</React.Fragment>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.