反映渲染错误

Question

I'm receiving this error when I try to render my nested nav:

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.

I'm not sure how to go about rendering my mapped nav correctly. Any help would be appreciated.

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

put items in the state

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

and then map it as

let nav = this.state.items...

Or if you don't put it in state you can access it with the context

let nav = this.items...

The point to note here is to use items in the same class which is Nav in your case by importing the source or define it in the same class.

class Nav extends Component {

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

or

class Nav extends Component {

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

Answer 2

You've error in this line of code:

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

So, removing this will work fine. What you'll do with it like this:

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

Now, you've different renderListItems component in which you can map to iterate through children:

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

Answer 3

You can't just return an array of objects because there's nothing telling React how to render that. You'll need to return an array of components or elements like:

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