此反应代码汉堡ingereidnet添加应用程序的替代方案

Posted 2023-02-22

【中文标题】此反应代码汉堡ingereidnet添加应用程序的替代方案

【英文标题】：Alternative for this react code burger ingereidnet add app

【发布时间】：2020-09-21 04:23:26

【问题描述】：

嗨，伙计们，我是 react 新手，我正在创建一个用于练习的汉堡构建器应用程序，我不理解以下代码，任何人都可以提供此代码的简单替代方案吗？

    props.ingredients: 
            salad: 0,
            eggs: 0,
            cheese: 0,
            meat: 0
        ,


let ingredientList = Object.keys(props.ingredients)
    .map(igKey => 
        return [...Array(props.ingredients[igKey])].map((_, i) => 
            return <BurgerFilling key=igKey + i type=igKey />
        );
    )
    .reduce((rootArray, currEl) => 
        console.log('rootArray>>>', rootArray, currEl);
        return rootArray.concat(currEl);
    , []); 

【问题讨论】：

您需要提供有关 props.ingredients 循环的信息。您希望示例输出是什么。

请再次检查问题我有修改

【参考方案1】：

由于 props.ingredients 是一个对象，其中的每个条目都只是一个数字，因此您可以简单地映射对象的键并渲染它，而无需内部映射

let ingredientList = Object.keys(props.ingredients)
    .map((igKey, i) => 
        return <BurgerFilling key=igKey + i type=igKey />
    )

【讨论】：

实际上我的代码运行良好，我只是想用另一种方式来做同样的事情。

以上代码适用于您的数据并且更简单

它不适用于对象中的非零值，因为对于任何特定成分的每个非零值，都会创建许多BurgerFilling 组件。比如salad: 2，那么应该创建2个BurgerFilling组件

@Yousaf 取决于其他人的要求是什么

谢谢@shubhamkhatri。感谢您的时间和回答。