Question

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

对象作为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

Answer 1

将input[type="color"]:first-child { padding: 0; margin: 0; border: none; box-shadow: none; border-radius: 100px; background: none; margin-bottom: 20px; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none;border-radius:4px; } input[type="color"]:nth-child(2) { padding: 0; margin: 0; border: none; box-shadow: none; border-radius: 100px; background: #f0bc12; outline: none; } input[type="color" i] { border-radius: 4px; border: none; height: 40px; width: 100px; display: block; }置于该状态

items

，然后将其映射为

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

Answer 2

您在以下代码行中出错：

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

因此，删除它会很好。像这样处理它：

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

现在，您具有不同的renderListItems组件，可以在其中映射以遍历子项：

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

Answer 3

您不能只返回对象数组，因为没有任何内容告诉React如何渲染它。您需要返回一系列的组件或元素，例如：

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

反应渲染错误

3 个答案: