Arrays 当状态为对象数组时如何更新特定值-React

我是ReactJs的新手，我正在尝试为ipotetic电子商务做一个简单的总结：当你添加一个产品时，你需要知道它是否已经存在，在这种情况下，只增加商品号

如您所见，如果行不存在，我将执行concat（行），它是一个对象

{ 
  id: singleProd.id, 
  name: singleProd.name, 
  price: singleProd.price,              
  value: 1 
}

)，但如果存在，我只需要增加value属性

state = {
    counters: []
  };

  addCounter = row => {
    let countersRows = this.state.counters;
    let existRow = countersRows.filter(c => c.id === row.id);

    if (existRow.length !== 0) {
      let index = countersRows.findIndex(x => x.id === existRow[0].id);
      console.log("Update here... like this.state.counters[index].value + 1?");
    } else {
      this.setState({ counters: countersRows.concat(row) });
    }
  };

  deleteRow = counterId => {
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters });
  };

我听说过对象分配，但我不知道怎么做。 非常感谢

---

看起来您只是试图用匹配的ID增加第一个项目的value属性。如果是，这是您想要的吗

addCounter = row => {
  const { counters } = this.state;
  const existingRow = counters.filter(c => c.id === row.id)[0];

  if (existingRow.length !== 0) {
    this.setState(
      Object.assign(existingRow, { value: existingRow.value + 1 })
    );
  } else {
    this.setState({ counters: counters.concat(row) });
  }
};

---

不要突变状态

在您的示例中，您正在修改现有的状态对象，它是一个 坏习惯

正确的做法是考虑现有状态计数器不变。然后生成一个全新的计数器数组

addCounter = row => {

  const { counters } = this.state;

  //map creates a brand new array
  let newCounters = counters.map((existingRow, index) => {
      if(index === row.id){
          if (existingRow.length !== 0) {
              //Using Object assign Copies all values  from existing row and the object literal to a brand new object
              //return Object.assign({}, existingRow, { value: existingRow.value + 1 });
              //Also instead use the spread operator for more clarity
              return {
                  ...existingRow,
                  value: existingRow.value+1
              };
          } else {
              return row;
          }
      }

      //Just return all other object
      return item;
  });

  this.setState({ counters : newCoutners });
}

---

查看Redux文档中的文章，了解有关如何进行不可变更新的更多详细信息

完美，这适用于状态：现在我唯一的问题是基于数组更新贴图组件…为什么它正在更新concat，而没有使用对象分配进行更新？你是说如果找不到现有行，它就不会更新吗？在检查长度是否为！==0看这里：非常感谢！现在，正如您从图像中看到的，我可以更改组件和产品的值！谢谢提示：如果我理解正确，最好创建一个副本并分配它？正如我所说，我是新的反应，谢谢你的帮助！