React：渲染組件時在瀏覽器中獲取運行時錯誤/警告

Question

我正在嘗試使用 react 為我的測試應用程序創建像此圖像這樣的左側菜單，並且在加載時在瀏覽器控制台上運行時收到以下警告/錯誤。

index.js:1375 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `LeftNav`. See fb.me/react-warning-keys for more information.

in Fragment (at LeftNav.js:12)
in LeftNav (at App.js:131)
in div (at App.js:120)
in div (at App.js:118)
in div (at App.js:116)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:115)
in App (at src/index.js:7)

每個 navItems 道具項目都有不同的 ID，所以每個組件都應該已經有唯一的鍵？ React.Fragment 也應該有一個唯一的鍵嗎？ LeftNav 組件如下

class LeftNav extends Component {
    render() {
        return (
            <ul>
                {this.props.navItems.map((navItem) => {
                    return (
                        <React.Fragment>
                            <LeftNavItem key={navItem.id} navItem={navItem} menuLevel={0} />
                            {navItem.subMenu.map((subMenuItem) => {
                                return <LeftNavItem key={subMenuItem.id} navItem={subMenuItem} menuLevel={1} />
                            })}

                        </React.Fragment>
                    )

                })}
            </ul>
        )
    }
}

LeftNav.propTypes = {
    navItems: PropTypes.array.isRequired
}

export default LeftNav;

LeftNavItem 組件如下。

import React, { Component } from 'react'
import PropTypes from 'prop-types';

class LeftNavItem extends Component {
    getClassName = () => {
        if(this.props.menuLevel === 0) {
            return 'parent_wrapper';
        } else {
            return '';
        }
    }
    render() {
        return (
            <li className={this.getClassName()}>
                <a href="">{this.props.navItem.title}</a>
            </li>
        )
    }
}

LeftNavItem.propTypes = {
    navItem: PropTypes.object.isRequired
}

export default LeftNavItem;

LeftNav class 的道具是

leftNav: [
  {
    id: 1,
    title: 'System Admin',
    active: false,
    subMenu: [
      {
        id: 2,
        title: '',
        active: false
      },
      {
        id: 3,
        title: '',
        active: false
      },
      {
        id: 4,
        title: '',
        active: false
      },
      {
        id: 5,
        title: '',
        active: false
      },
      {
        id: 6,
        title: '',
        active: false
      },
      {
        id: 7,
        title: '',
        active: false
      },
      {
        id: 8,
        title: '',
        active: false
      },
      {
        id: 9,
        title: '',
        active: false
      }
    ]
  },
  {
    id: 10,
    title: 'Reports',
    active: false,
    subMenu: [
      {
        id: 11,
        title: 'Reports',
        active: false
      },
      {
        id: 12,
        title: 'Dashboard',
        active: true
      },
      {
        id: 13,
        title: 'Templates',
        active: false
      }
    ]

謝謝！！

Answer 1

將您的密鑰添加到片段而不是嵌套標簽。

return (
       <React.Fragment key={navItem.id}>
            <LeftNavItem navItem={navItem} menuLevel={0} />
            {navItem.subMenu.map((subMenuItem) => {
                return <LeftNavItem key={subMenuItem.id} navItem={subMenuItem} menuLevel={1} />
            })}

       </React.Fragment>
)