TypeError:无法读取属性'；名称'；ReactJS中未定义的

我想用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}

我的主页：

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

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

export default Home

我这样做是为了为有价值的成分创建一个模板​​0处于初始状态

我的IngCredits功能表：

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

export default IngredientsMenu

const IngredientsMenu=（{components}）=>{
const{burger，updateBurger}=useContext（BurgerContext）；
返回(
{burger.map（（项目）=>(
))}
)
}
导出默认IngCreditsMenu

我的IngCreditsNuItem：

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

const IngredientsMenuItem=（{item）=>{
const{burger，updateBurger}=useContext（BurgerContext）；
常量handleIncrement=（burgerItem）=>{
}
const handleDecrement=（burgerItem）=>{
}
返回(
{item.component.name}
{项目.成分.价格}
handleIncrement（项目）}
onDecrement={（）=>handleDecrement（项目）}
/>
)
}
导出默认IngCreditsNuItem

---

我看不出我的错在哪里。是否有人可以提供帮助？

在您的组件

InCreditsNuItem

上，

项

属性可能是

null

或

未定义

考虑在组件中添加一个

console.log

指令，看看到底有什么

如果希望代码“永不中断”，可以检查内容是否存在，如果不存在，则还原为空对象，如下所示：

const IngredientsMenuItem = ({item) => {
    const {burger, updateBurger} = useContext(BurgerContext);
    const handleIncrement = (burgerItem) => {
        
    }
    const handleDecrement = (burgerItem) => {
        
    }

    const ingredient = (item && item.ingredient) || {};
    // this can be replaced to a shorter version if you support the `?.` operator:
    // const ingredient = item?.ingredient || {};

    const qty = (item && item.qty) || 0;
    
    return (
        <ItemWrapper>
            <ItemContent>
                <h3>{ingredient.name}</h3>
                <h4>{ingredient.price}</h4>
                    <Counter
                        value={qty}
                        onIncrement={() => handleIncrement(item)}
                        onDecrement={() => handleDecrement(item)}
                    />
            </ItemContent>
        </ItemWrapper>
    )
}

const IngredientsMenuItem=（{item）=>{
const{burger，updateBurger}=useContext（BurgerContext）；
常量handleIncrement=（burgerItem）=>{
}
const handleDecrement=（burgerItem）=>{
}
常量成分=（项目和项目成分）|{}；
//如果您支持`？.`运算符，则可以将其替换为较短的版本：
//常量成分=项目？成分| |{}；
常量数量=（项目和项目数量）| 0；
返回(
{component.name}
{成分.价格}
handleIncrement（项目）}
onDecrement={（）=>handleDecrement（项目）}
/>
)
}

在我的回答中，我假设您的应用程序使用

BurgerContext

的上下文提供程序包装。。。是吗？您在

项目之后缺少了一个大括号
}
这里：
const IngredientsMenuItem=（{item）=>{
作为最佳实践，这种逻辑不应该在
return
语句中：
{！burger.length&&updateBurger（buildBurger（配料））}
@lindapaste原始代码中没有大括号，我认为复制它时出错。关于另一个问题，你是对的，我在这方面有点新：）我在useEffect中移动了那个部分，我想现在更好了。谢谢你的回答，我真的很感激：）是的，我的代码是用BurgerContext provider和我包装的找到答案：）是的，我的项目属性未定义，因为我在buildBurder函数中返回了一个数组，所以它是数组中的一个数组。因此，当我直接说item.component时，它找不到它。谢谢你的回答，我真的很感激：）
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

const IngredientsMenuItem = ({item) => {
    const {burger, updateBurger} = useContext(BurgerContext);
    const handleIncrement = (burgerItem) => {
        
    }
    const handleDecrement = (burgerItem) => {
        
    }

    const ingredient = (item && item.ingredient) || {};
    // this can be replaced to a shorter version if you support the `?.` operator:
    // const ingredient = item?.ingredient || {};

    const qty = (item && item.qty) || 0;
    
    return (
        <ItemWrapper>
            <ItemContent>
                <h3>{ingredient.name}</h3>
                <h4>{ingredient.price}</h4>
                    <Counter
                        value={qty}
                        onIncrement={() => handleIncrement(item)}
                        onDecrement={() => handleDecrement(item)}
                    />
            </ItemContent>
        </ItemWrapper>
    )
}