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成分的数组。

通过更优雅的IMO：

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

Answer 2

unnest_token

返回一个数字，例如培根为5。

props.ingredients[igKey]

返回n个元素的数组。这些元素尚未定义，因为您尚未填写它们。

解决方案是：

[...Array(props.ingredients[igKey])]

或者简单地：

[...Array(props.ingredients[igKey])].fill(igKey)

结果是：

Array(state.ingredients[igKey]).fill(igKey)

对象到数组的转换

2 个答案: