React数组map渲染时唯一key prop不生效问题

React的key警告触发条件是：数组map渲染时，循环直接return的最外层同级元素必须绑定唯一key，你的代码有两处不符合要求：

• 非FAQ项的返回值是空Fragment简写<>...</>，你把key写在了Fragment内部的<a>标签上，循环返回的根节点（空Fragment）本身没有key，React无法识别。另外<>...</>的简写语法不支持传入任何属性（包括key），要给Fragment加key必须使用显式导入的Fragment组件。
• FAQ分支的两个包裹div虽然加了key，但一个传数字类型的index、一个传字符串类型的index.toString()，写法不统一不会直接触发警告，但会导致React diff时做不必要的重渲染。

1. 在文件顶部的导入语句中，补充导入Fragment：

import { Fragment } from 'react'
import styles from '../styles/NavImage.module.css'
import { Link } from 'react-scroll'

2. 把非FAQ分支的空简写Fragment替换为显式Fragment标签，将key绑定在Fragment上，删除原来写在<a>标签上的key属性。这里直接用导航项字符串navLink当key即可，本身是唯一值，比用索引更符合React最佳实践，如果你暂时只想用索引消警告也可以替换成key={index}。
3. 统一FAQ分支两个div的key写法。

import { Fragment } from 'react'
import styles from '../styles/NavImage.module.css'
import { Link } from 'react-scroll'

const NAVLINKSHOVER = ['About', 'Club', 'Team', 'Timing', 'FAQ']

const NavImage = ({toggleFaq, toggleState, hoveredIndex, setHoveredIndex}) => {

    const handleClick = () => {
        toggleFaq();
      };

    return ( 
        <nav className={styles.navbar}>
            <div className={styles.linkContainer}>
               {
                    NAVLINKSHOVER.map ((navLink, index) => {
                        if (navLink === 'FAQ') {
                            return  (
                                toggleState?(
                                    <div key={navLink}>
                                        <Link 
                                            to="main"
                                            smooth={true}
                                            offset={0}
                                            duration={0}
                                            onClick={handleClick}
                                            className={`${styles.navLinks} ${styles.linkNotActive}`}
                                            >FAQ
                                        </Link>
                                    </div>
                                ):(
                                    <div key={navLink}>
                                        <Link 
                                            to="faq"
                                            smooth={true}
                                            offset={500}
                                            duration={200}
                                            onClick={handleClick}
                                            className={`${styles.navLinks} ${styles.linkNotActive}`}
                                            >FAQ
                                        </Link>                                     
                                    </div>
                                )
                            )
                        }
                        return (
                            <Fragment key={navLink}>
                                <a 
                                    className={`${styles.navLinks} ${hoveredIndex === index? styles.linkActive : styles.linkNotActive}`}
                                    onMouseEnter={() => setHoveredIndex(index)}
                                    onMouseLeave={() => setHoveredIndex(-1)}
                                >
                                    {navLink}
                                </a>
                                {
                                    index!==NAVLINKSHOVER.length-1? <p className={styles.divider}> | </p> : null
                                }
                            </Fragment>
                        )
                    })
                }
            </div>
        </nav>
     );
}
 
export default NavImage;

替换后控制台的key警告会直接消失。

内容的提问来源于stack exchange，提问作者user19430071