React渲染列表时，已经加了key，确还提示没有添加key属性

Question

如图，我递归渲染一个多级菜单组件，我在每个li中已经添加了key属性，devtools中也显示每个li都有key，但是仍然报错，请问如何解决
（我尝试把代码<li key={menuItem._id}>{vdom}</li>中的{vdom}删除了就不报错了，这时因为底层会把数组对象做遍历处理吗？有什么方案可以解决此问题）

// 父组件中传入的列表
[
  {
    _id: 1,
    name: '首页',
    to: '/'
  },
  {
    _id: 2,
    name: '分类',
    children: [
      {
        _id: 3,
        name: '分类1',
        to: '/cate1'
      },
      {
        _id: 4,
        name: '分类2',
        to: '/cate2'
      }
    ]
  },
  {
    _id: 5,
    name: '关于',
    to: '/about'
  }
]

// Menu组件
export default class Menu extends Component {
  static propTypes = {
    list: PropTypes.array.isRequired
  }

  renderMenu = menuList => {
    return (
      <ul className="menu">
        {
          menuList.map(menuItem => {
            const vdom = []
            if (menuItem.to) {
              vdom.push(
                <NavLink className="menu-item" to={menuItem.to}>
                  <span>{menuItem.name}</span>
                </NavLink>
              )
            } else {
              vdom.push(
                <a href="#!" className="menu-item">
                  <span>{menuItem.name}</span>
                </a>
              )
            }
  
            if (menuItem.children) {
              vdom.push(this.renderMenu(menuItem.children))
            }

            return <li key={menuItem._id}>{vdom}</li>
          })
        }
      </ul>
    )
  }

  render () {
    return this.renderMenu(this.props.list)
  }
}

已解决

renderMenu = menuList => {
    return (
      <ul className="menu">
        {
          menuList.map(menuItem => {
            return (
              <li key={menuItem._id}>
                {
                  menuItem.to ?
                    <NavLink className="menu-item" to={menuItem.to}>
                      <span>{menuItem.name}</span>
                    </NavLink> :
                    <a
                      href="#!"
                      className="menu-item">
                      <span>{menuItem.name}</span>
                    </a>
                }
                {
                  menuItem.children && this.renderMenu(menuItem.children)
                }
              </li>
            )
          })
        }
      </ul>
    )
  }

Answer 1

<NavLink/>和<a/>也需要加key吧