我正在尝试在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
我看不到我的错在哪里。有谁可以帮助您?