我正在尝试在ReactJS中创建一个动态汉堡构建器。打开主页后，我会收到如下错误：

TypeError: Cannot read property 'name' of undefined
IngredientsMenuItem
/src/components/IngredientsMenu/IngredientsMenuItem.js:18
  15 | return (
  16 |     <ItemWrapper>
  17 |         <ItemContent>
> 18 |             <h3>{item.ingredient.name}</h3>
     | ^  19 |             <h4>{item.ingredient.price}</h4>
  20 |                 <Counter
  21 |                     value={item.qty}

我将汉堡放在上下文中。

我的配料文件：

export const ingredients= [
    {
        name:"salad",price:0.5,},{
        name:"cheese",price:0.4,{
        name:"meat",price:1.3,];

我的主页：

const Home = () => {
    const {burger,updateBurger} = useContext(BurgerContext);

    return (
        <div>
            {!burger.length && updateBurger(buildBurger(ingredients))}
            <Burger/>
            <IngredientsMenu
                ingredients={ingredients}
            />
        </div>
    )
}

export default Home

我的buildBurger函数：

export const buildBurger = (ingredients) => {
    return [
        ingredients.map((ingredient) => (
            {
                qty:0,ingredient: ingredient
            }
        ))
    ]
} 

我这样做是为了为初始状态下值为0的配料创建一个模板。

我的配料菜单：

const IngredientsMenu = ({ingredients}) => {
    const {burger,updateBurger} = useContext(BurgerContext);
    return (
        <>
        
        <Wrapper>
            {burger.map((item) => (
                <IngredientsMenuItem
                    item={item}
                />
            ))}
        </Wrapper>
        </>
    )
}

export default IngredientsMenu

我的IngredientsMenuItem：

const IngredientsMenuItem = ({item) => {
    const {burger,updateBurger} = useContext(BurgerContext);
    const handleIncrement = (burgerItem) => {
        
    }
    const handleDecrement = (burgerItem) => {
        
    }
    
    return (
        <ItemWrapper>
            <ItemContent>
                <h3>{item.ingredient.name}</h3>
                <h4>{item.ingredient.price}</h4>
                    <Counter
                        value={item.qty}
                        onIncrement={() => handleIncrement(item)}
                        onDecrement={() => handleDecrement(item)}
                    />
            </ItemContent>
        </ItemWrapper>
    )
}

export default IngredientsMenuItem

我看不到我的错在哪里。有谁可以帮助您？