Javascript 此react code burger ingereidnet添加应用程序的备选方案

大家好，我是react的新手，我正在创建一个burger builder应用程序用于实践我不理解以下代码，有人能给出此代码的简单替代方案吗

    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.components：{
沙拉：0，
蛋：0，
奶酪：0，
肉类：0
},
让IngreditList=Object.keys（道具成分）
.map（igKey=>{
return[…数组（props.components[igKey]）].map（（q，i）=>{
返回
});
})
.reduce（（rootArray，currEl）=>{
log（'rootArray>>>'，rootArray，currEl）；
返回rootArray.concat（currEl）；
}, []); 

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

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

让ingredientList=Object.keys（道具成分）
.map（（igKey，i）=>{
返回
})

您需要提供有关道具的信息。您希望样本输出是什么。请再次检查问题我已经修改了事实上我的代码工作正常我只是想用另一种方法来做同样的事情。上面的代码将适用于您的数据，并且是简单的。它不适用于对象中的非零值，因为对于任何特定成分的每个非零值，创建了许多

组件。例如，如果
salar:2
，则2
BurgerFilling
组件应为created@Yousaf取决于其他人的要求是什么。谢谢你的时间和回答。