Javascript 更改函数中的局部值，修改react中的全局状态

我使用状态为的shoppinglist数组创建了react组件。 shoppinglist具有多个数组和对象，以反映每天和每顿饭的配料匹配情况

这个函数循环遍历每个成分，并将其推送到一个空数组中，我稍后映射该数组并返回值。当我发现配料数组中已经存在的配料时，它会修改值，而不是推送一个新的类似配料。（这样做的原因是周一和周二的早餐都可以含有“苹果”成分，然后我只想在列表中显示一次“苹果”，但要有足够的值来反映这两种早餐

问题： 我修改的成分的值在状态级别上更改。这意味着当我再次运行该功能时（我这样做是因为用户可以过滤天数），该值会增加

场景 星期一和星期二的早餐都有苹果配料。苹果的值为2，因为食谱需要两个苹果。这意味着我的循环应该返回4个苹果。这是第一次。但当我更改som过滤器，使循环再次运行以反映新过滤器时，它现在显示6个苹果

有人能告诉我这是怎么可能的吗？这段代码如何修改我的全局状态

loopIngredients (items) {
    const ingredients = []
    const newArr = items.slice()

    newArr.map((data, key) => {
      data.map((data, index) => {
        const valid = ingredients.find((item) => item.ingredient.id === data.ingredient.id)
        if (valid) {
          const parentValue = parseInt(ingredients[index].value)
          const localValue = parseInt(data.value)
          ingredients[index].value = (parentValue + localValue).toString()
        } else {
          ingredients.push(data)
        }
      })
   })
} // END loopIngredients

---

找到了解决方案：

components.push（数据）

从状态中推送引用。 我以为我通过执行.slice（）删除了引用，但显然没有

通过执行

components.push（Object.create（data））

它按预期工作