已为列表项设置唯一Key仍报错？React Key警告问题求助

问题核心：你循环返回的直接子元素是空Fragment（<>），而非<MenuItem>。React要求循环生成的列表项，其最外层直接子元素必须携带唯一key属性——你把key加在了内部的<MenuItem>上，这不符合React的key校验规则。另外，空Fragment（<>...</>）本身不支持设置key，这才是警告的根源。

修复方案 #

方案1：移除不必要的Fragment #

你的Fragment内部只包含一个<MenuItem>，完全可以直接返回<MenuItem>，去掉多余的Fragment包裹：

<MenuList width={'148px'} >
    { Object.entries(userRoleMenu[UserRole]).map((item, index) => 
        item[0]==='fpv' ?
        <MenuItem _hover={{backgroundColor:'gray.50'}} key={item[0]} onClick={handleMenuClick(item)}>
        </MenuItem>
        :
        <MenuItem _hover={{backgroundColor:'gray.50'}} key={item[0]} onClick={handleMenuClick(item)}>{item[0]}</MenuItem>
    )}
</MenuList>

方案2：使用带key的React.Fragment（若确实需要Fragment） #

如果后续Fragment内要添加多个元素，必须使用完整的<React.Fragment>并为其设置key：

import React from 'react';

// ...

<MenuList width={'148px'} >
    { Object.entries(userRoleMenu[UserRole]).map((item, index) => 
        <React.Fragment key={item[0]}>
            {item[0]==='fpv' ?
            <MenuItem _hover={{backgroundColor:'gray.50'}} onClick={handleMenuClick(item)}>
            </MenuItem>
            :
            <MenuItem _hover={{backgroundColor:'gray.50'}} onClick={handleMenuClick(item)}>{item[0]}</MenuItem>
            }
        </React.Fragment>
    )}
</MenuList>

注意：此时内部的<MenuItem>不需要再设置key，React只校验循环最外层子元素的key唯一性。

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