为什么当已经有 key prop 时这个警告一直出现？警告：列表中的每个孩子都应该有一个唯一的“关键”道具

Question

我是 React 新手，我不明白为什么会出现这个警告，

警告：列表中的每个孩子都应该有一个唯一的“key”道具

当元素上已有 key prop 时继续出现？

我正在使用一个名为 react-horizo​​ntal-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;

Answer 1

你在这里缺少一个键

               <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>