Javascript 反应渲染错误

当我尝试渲染嵌套导航时，收到此错误：

对象作为React子对象无效（找到：键为{id，name}的对象）。如果要呈现子对象集合，请改用数组

我不确定如何正确渲染映射的导航。任何帮助都将不胜感激

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

let项目=[
{id:0，名称：'Products'，items:[{id:2，名称：'M-PET.NET'}，{id:3，名称：'M-PET.WEB'}]}，
{id:4，名称：'Services'，项：[{id:5，名称：'M-PET Hosted'}，{id:6，名称：'Custom Programming'}]}，
{id:7，名称：'TurnKey'，项目：[{id:8，名称：'About'}，{id:9，名称：'Project Management'}，{id:10，名称：'IT Tasks'}，{id:11，名称：'Maintenance'}]}，
{id:12，名称：'重点行业'，项目：[{id:13，名称：'交通'}，{id:14，名称：'酒店'}]}，
{id:15，名称：'Company'，项：['Team'，'History']}，
]
类Nav扩展组件{
render（）{
让nav=items.map（（item）=>）
控制台日志（nav）
返回(

{nav}

)
}
}
导出默认导航

将

项目

置于状态

state = {
 items : [...] //array
}

然后将其映射为

let nav = this.state.items...

或者，若您不将其置于状态，则可以使用

上下文访问它

let nav = this.items...

这里需要注意的一点是，通过导入源或在同一类中定义源，在同一类中使用
项
，即
Nav

class Nav extends Component {

 let items = [...];
 ...
 render(){
  let nav = this.items...
 }
}

或

这行代码中有一个错误：

<li node={item} children={item.items} key={item.id}>
// passed as object ^^ (item.items)


//作为对象传递^^（item.items）

所以，移除这个会很好。您将如何处理它，如下所示：

<li node={item} key={item.id}>{renderListItems(item.items)}</li>

{renderlitiems（item.items）}

现在，您有了不同的renderListItems组件，您可以在其中映射以迭代子对象：

renderListItems = (items) => {
     return items.map(item => (
       <p key={`don't-forget-the-key-to-unique`}>{item.name}</p>
     ))
   }

renderlitiems=（项目）=>{
返回items.map（item=>(
你不能只返回一个对象数组，因为没有任何东西可以告诉你如何渲染它。你需要返回一个组件或元素数组，如：

let nav = items.map((item) =>
  <li
    node={item}
    children={item.items.map(x => x.name)}
    key={item.id}>
  </li>)

let nav=items.map（（item）=>
x.name）}
key={item.id}>
）
这将对唯一键发出警告。因此，正确的解决方案是使用children元素而不是children作为属性。
let nav = items.map((item) =>
  <li
    node={item}
    children={item.items.map(x => x.name)}
    key={item.id}>
  </li>)