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

Question

嗨，伙计们，我是 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);
    }, []); 

Answer 1

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

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