收到警告消息：列表中的每个孩子都应该有一个唯一的“键”道具。仅在浏览器中显示，不在文本编辑器控制台中显示。-React.js[重复]

Question

昨天面临下一个问题，不知道如何解决。如我所见，我所有的钥匙都是独一无二的...有人看到解决办法了吗？P. S.我已经在一个类似的问题上阅读了不同的解决方案，但仍然不知道如何让钥匙“独一无二”。

我的Navbar.js如下所示：

    import React, { useState } from 'react'
import { MenuItems } from './MenuItems'
import { Button } from "../Button"
import "./Navbar.css"
import { Link } from 'react-router-dom';


function Navbar() {

    // state = {clicked: false}


    const [click, setClick] = useState(false);
    const [button, setButton] = useState(true);

    const handleClick = () => setClick(!click);
    const closeMobileMenu = () => setClick(false);

    const showButton = () => {
        if (window.innerWidth <= 1100) {
            setButton(false);

        } else {
            setButton(true)
        }
    }

说问题就在下面的某个地方。。确切错误消息：警告：列表中的每个子项都应该有一个唯一的“键”属性。

检查Navbar的渲染方法。有关更多信息，请参阅https://reactjs.org/link/warning-keys。

 const navBarItems = (
<ul className={click ? 'nav-menu active' : 'nav-menu'}>


{MenuItems.map((item) => {

    return (
        <div to="" style={{ textDecoration: 'none' }} onClick={closeMobileMenu}>
            <li key={item.id}>
                <a className={item.cName} href={item.url}>
                    {item.title}
                </a>
            </li>
        </div>
    )
})}


</ul>
 )

window.addEventListener('resize', showButton);

return (
    <>
        <nav className="NavbarItems">
            <Link to='/' className="navbar-logo" onClick={closeMobileMenu} >
                <img src="/images/yokifyLogo.svg" alt="" />
            </Link>
            <div className="menu-icon" onClick={handleClick}>

                <i className={click ? 'fas fa-times' : 'fas fa-bars'}></i>

            </div>

            
                 
                <div>
                    {navBarItems}
                </div>
            



            <div className='nav-btn'>
                {button ? (
                    <div>
                        <Link to='/log-in' className='btn-link'>
                            <Button buttonStyle='btn--secondary'>Log in</Button>
                        </Link>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <Link to='/sign-up' className='btn-links' id='sign-up'>
                            <Button buttonStyle='btn--primary'>Sign up</Button>
                        </Link>

                    </div>
                ) : (
                        <Link to='/sign-up' className='btn-link' id='log-in'>
                            {/* <Button buttonStyle='btn--mob' buttonSize='btn--mobile'>Sign up</Button> */}
                        </Link>
                    )}


            </div>
        </nav>
    </>
);
// }

}

导出默认导航栏

基本JSON文件

export const MenuItems = [
    {
        id: 1,
        title: 'Partners',
        url: '/partners',
        cName: 'nav-links'
    },
    {
        id: 2,
        title: 'Contact',
        url: '/contact',
        cName: 'nav-links'
    },
    {
        id: 3,
        title: 'About',
        url: '/about',
        cName: 'nav-links'
    },
    {
        id: 4,
        title: 'Log in',
        url: '/log-in',
        cName: 'nav-links-mobile'
    },
    
];

Answer 1

钥匙必须在顶级标签中

{MenuItems.map((item) => {
    return (
        <div key={item.id} to="" style={{ textDecoration: 'none' }} onClick={closeMobileMenu}>
            <li>
...