Преобразование объекта в массив

Question

У меня есть это состояние Объект в классе:

state = {
    ingredients: {
        salad: 1,
        bacon: 5, 
        cheese: 2, 
        meat: 2
    }
}

и хотите преобразовать его в массив, который также получает номер значения, например:

const burger = (props) => {
const transformedIngredients = Object.keys(props.ingredients)
    .map(igKey => {
        return [...Array(props.ingredients[igKey])].map((_,i)=>{
           return <BurgerIngredient key={igKey + i} type={igKey}/>
        });
    });

    console.log(transformedIngredients)
    return(
        <div className={classes.Burger}> 
        <BurgerIngredient type="bread-top" />
        <BurgerIngredient type="cheese" />
        <BurgerIngredient type="meat" />
        <BurgerIngredient type="bread-bottom" />
    </div>
  );
};
export default burger;

Мне удалось это сделать после урока, и, честно говоря, я не до конца понимаю, что здесь происходит. особенно эта часть:

return [...Array(props.ingredients[igKey])].map((_,i)=>{
       return <BurgerIngredient key={igKey + i} type={igKey}/>
    });

любая помощь будет принята с благодарностью! Спасибо!

Answer 1

igKey - это один из ключей ваших ингредиентов, например, bacon. Теперь это ищется в ингредиентах с

 props.ingredients[igKey]

, в результате чего получается сумма, 5 в данном случае. Теперь это используется для создания массива такой длины:

 Array(5) // { length: 5 }

Теперь этот массив является разреженным массивом, в нем ничего нет. Чтобы иметь возможность перебирать его с map, он должен быть заполнен неопределенными значениями, поэтому этот разреженный массив распределяется в новый массив, который превращает его в заполненный массив:

 [...Array(5)] // { length: 5, 0: undefined, 1: undefined, 2: ... }

Теперь этот пустой массив с 5 записями будет отображен в массив с 5 ингредиентами Burger.

---

Кстати, более элегантный ИМО:

 Array.from(
   { length: props.infredients[igKey] },
   (_, i) => <BurgerIngredient key={igKey + i} type={igKey}/>
 )