从 Javascript 中的对象数组中向对象添加新的 属性

Question

我正在尝试向一个对象添加一个新的 属性，该对象是对象数组的一部分。 主数组如下所示：

0: {key: 'Fruits', props: Array(22)}
1: {key: 'Dried', props: Array(1)}
2: {key: 'Fresh', props: Array(1)}
3: {key: 'Exotic', props: Array(6)}
4: {key: 'Nuts', props: Array(6)}

我要修改的是props键里面的一个对象。当单击与名称匹配的某个对象时，应添加新的 属性。所以我的代码看起来像这样：

    let updatedFruitsArr = [];
    const fruitsArr = [...getFruitsFromLocalStorge()];

    // modify the fruits array in order to add a new key to the 
    // object that matches the name selected
    fruitsArr.forEach((fruits) => {
        updatedFruitsArr.push({
            ...fruits,
            props: [...fruits.props].map((fruit) => {
                if (fruit.name === fruitName) {
                    return {
                        ...fruit,
                        isInCart: true
                    };
                } else {
                    return fruit
                }
            }),
        });
    });

但是，每次updatedFruitsArrreturns原始数组没有那个属性添加。 你能告诉我我做错了什么吗？ 谢谢

Answer 1

您不需要创建新数组并使用 .forEach 和 .push，您只需使用 .map:

const fruits = [
  {
    key: 'Fruits',
    props: [
      {
        name: 'Apple'
      },
      {
        name: 'Orange'
      },
      {
        name: 'Pear'
      }
    ]
  },
  {
    key: 'Nuts',
    props: [
      {
        name: 'Cashew'
      },
      {
        name: 'Peanuts'
      }
    ]
  }
];

const newFruits = fruits.map(fruitType => {
  return {
    ...fruitType,
    props: fruitType.props.map(fruit => {
      if(fruit.name === 'Apple'){
        return {
          ...fruit,
          isInCart: true
        }
      } else {
        return {
          ...fruit
        }
      }
    })
  }
});

console.log(newFruits);