当我尝试呈现我的嵌套导航时收到此错误:
Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.
我不确定如何正确渲染我的映射导航。任何帮助将不胜感激。
let items = [
{ id: 0, name: 'Products', items: [{ id: 2, name: 'M-PET.NET' }, { id: 3, name: 'M-PET.WEB' }]},
{ id: 4, name: 'Services', items: [{ id: 5, name: 'M-PET Hosted' }, { id: 6, name: 'Custom Programming' }]},
{ id: 7, name: 'TurnKey', items: [{ id: 8, name: 'About' }, { id: 9, name: 'Project Management' }, { id: 10, name: 'IT Tasks' }, { id: 11, name: 'Maintenance' }]},
{ id: 12, name: 'Key Industries', items: [{ id: 13, name: 'Transportation' }, { id: 14, name: 'Hospitality' }]},
{ id: 15, name: 'Company', items: ['Team', 'History']},
]
class Nav extends Component {
render() {
let nav = items.map((item) => <li node={item} children={item.items} key={item.id}></li>)
console.log(nav)
return (
<div>
<ul className='nav'>
{nav}
</ul>
</div>
)
}
}
export default Nav
最佳答案
将项目
放入状态
state = {
items : [...] //array
}
然后将其映射为
let nav = this.state.items...
或者,如果您不将其置于状态,则可以使用 context
let nav = this.items...
这里要注意的一点是在同一个类中使用 items
,在你的例子中是 Nav
,方法是导入源代码或在同一个类中定义它。
class Nav extends Component {
let items = [...];
...
render(){
let nav = this.items...
}
}
或
class Nav extends Component {
state = { items:[...] };
...
render(){
let nav = this.state.items...
}
}
关于javascript - react 渲染错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51997660/