Javascript 为什么在已经有钥匙道具的情况下，此警告会一直出现？警告：列表中的每个子项都应具有唯一的；“关键”；道具

我是React的新手，我不明白为什么会有这样的警告

警告：列表中的每个子项都应具有唯一的“键”道具

当元素上已经有关键道具时，是否继续显示

我正在使用一个名为react horizontal scrolling menu的NPM包，在包中它使用JavaScript，我在react项目中使用Typescript，如果这有什么不同的话

const list: any[] = ["items", "item2"];

const MenuItem = ({ text, selected }: {text: string, selected: string}) => {
    return <div
    className={`menu-item ${selected ? 'active' : ''}`}
    >{text}</div>;
}

const selected: any = 'item1';

export const Menu = (list: any, selected: any) => {
    list.map((el: any, index: any) => {
        const { name } = el;
        
        return <MenuItem text={name} key={name} selected={selected} />;
    })
}

const Arrow = ({ text, className }: {text: string, className: any}) => {
    return (
      <div
        className={className}
      >{text}</div>
    );
  };
   
   
  const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
  const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });
   

class RestaurantListIndex extends Component {

    private menuItems: any;

    constructor(props: any) {
        super(props);
        
        this.menuItems = Menu(list, selected);
    }

    state = {
        selected,
        // restaraunts: [
        //     { name: 'Ashish 11 Restaurant', type: 'North Indian, Punjabi, Chinese', rating: 4.9, deliveryTime: 45, },
        //     { name: 'Ashish 11 Restaurant', type: 'North Indian, Punjabi, Chinese', rating: 4.9, deliveryTime: 45, },
        //     { name: 'Ashish 11 Restaurant', type: 'North Indian, Punjabi, Chinese', rating: 4.9, deliveryTime: 45, },
        // ],
        menu: [{ imageUrl: "", name: "Testing", ingredients: "" },]
    };

    onSelect = (key: any) => {
        this.setState({ selected: key });
    }
    
    render() {
        const { selected } = this.state;
        const menu = this.menuItems;
        return (

            <div>
                <div className="pb-5 pt-3" style={{ backgroundColor: "#2D2A4B" }}>
                    <div className="view">

                        <div className="row">
                            <div className="col">
                                <h1 className="font-weight-bold text-white">Logo</h1>
                            </div>
                            <div className="col-auto">
                                <h6 className="text-white">icon</h6>
                            </div>
                            <div className="col-auto">
                                <h6 className="text-white">Login</h6>
                            </div>
                        </div>

                        <ScrollMenu
                            data={menu}
                            arrowLeft={ArrowLeft}
                            arrowRight={ArrowRight}
                            selected={selected}
                            onSelect={this.onSelect}
                        />
                    </div>
                </div>
            
                <div className="view mt-3">
                    <div className="row mt-5">
                        <div className="col">
                            <h2>Menu</h2>
                        </div>
                    
                        <div className="col-auto">
                            <h5>Delivery Time: <strong>45 minutes</strong></h5>
                        </div>
                    </div>

                
                    <div className="row mt-5 pt-5">
                        {this.state.menu.map((menuItem) => {
                            return <MenuItemCard
                                imageUrl={menuItem.imageUrl}
                                name={menuItem.name}
                                ingredients={menuItem.ingredients}
                            />
                        })}
                    </div>
                
                </div>
            
            </div>
        );
    }
}

export default RestaurantListIndex;

const list:any[]=“items”，“item2”]；
const MenuItem=（{text，selected}:{text:string，selected:string}）=>{
返回{text}；
}
所选常量：any='item1'；
导出常量菜单=（列表：任意，选定：任意）=>{
list.map（（el:any，index:any）=>{
常数{name}=el；
回来
})
}
常量箭头=（{text，className}:{text:string，className:any}）=>{
返回(
{text}
);
};
const ArrowLeft=Arrow（{text:''，className:'Arrow next'}）；
类RestaurantListIndex扩展组件{
私人菜单项：任何；
构造器（道具：任何）{
超级（道具）；
this.menuItems=菜单（列表，选中）；
}
状态={
挑选出来的，
//餐厅：[
//{名称：'Ashish 11餐厅'，类型：'North Indian，Punjabi，Chinese'，评级：4.9，配送时间：45，}，
//{名称：'Ashish 11餐厅'，类型：'North Indian，Punjabi，Chinese'，评级：4.9，配送时间：45，}，
//{名称：'Ashish 11餐厅'，类型：'North Indian，Punjabi，Chinese'，评级：4.9，配送时间：45，}，
// ],
菜单：[{imageUrl:，名称：“测试”，成分：}，]
};
onSelect=（键：任意）=>{
this.setState（{selected:key}）；
}
render（）{
const{selected}=this.state；
const menu=this.menuItems；
返回(
标志
偶像
登录
菜单
交货时间：45分钟
{this.state.menu.map（（menuItem）=>{
回来
})}
);
}
}
导出默认RestaurantListIndex；

您缺少一把钥匙

               <div className="row mt-5 pt-5">
                    {this.state.menu.map((menuItem) => {
                        return <MenuItemCard

                            key={menuItem.name}

                            imageUrl={menuItem.imageUrl}
                            name={menuItem.name}
                            ingredients={menuItem.ingredients}
                        />
                    })}
                </div>

{this.state.menu.map（（menuItem）=>{
回来
})}

这是否回答了您的问题？