Javascript 两个相似的react函数在重新招标时产生不一致的结果

此功能正常工作，部件重新加载

  handleRemove = (e) => {
//console.log(e);
const arrayCopy = this.state.scanlist.filter((row) => row.ref + row.lot !== e.ref + e.lot);
this.setState({ scanlist: arrayCopy });};

此函数可更改状态，但组件不会重新启动

  handleAdd = (e) => {
//console.log(e);
const index = this.state.scanlist.findIndex((row) => row.ref === e.ref && row.lot === e.lot);
let scancopy = this.state.scanlist;
scancopy[index].qty = scancopy[index].qty + 1;
console.log(scancopy);
this.setState({ scanlist: scancopy });};

---

有人看到这个问题吗？变异？

在第一种方法中，过滤器方法返回新列表，而在第二种方法中，它只是引用状态数组

在第二种方法中尝试浅复制

let scancopy = [...this.state.scanlist]

let scancopy = JSON.parse(JSON.stringify(this.state.scanlist));

或

简单的深度复制方法

let scancopy = [...this.state.scanlist]

let scancopy = JSON.parse(JSON.stringify(this.state.scanlist));

---

在第一种方法中，filter方法返回新列表，而在第二种方法中，它只是引用状态数组

在第二种方法中尝试浅复制

let scancopy = [...this.state.scanlist]

let scancopy = JSON.parse(JSON.stringify(this.state.scanlist));

或

简单的深度复制方法

let scancopy = [...this.state.scanlist]

let scancopy = JSON.parse(JSON.stringify(this.state.scanlist));

---

使用

Array.prototype.filter

从数组中删除元素是相当标准的，但是在第二个处理程序中，是的，您有一个状态对象变异

handleAdd = (e) => {
  const index = this.state.scanlist.findIndex((row) => row.ref === e.ref && row.lot === e.lot);
  let scancopy = this.state.scanlist;
  scancopy[index].qty = scancopy[index].qty + 1; // <-- state object mutation
  this.setState({ scanlist: scancopy });
};

---

使用

Array.prototype.filter

从数组中删除元素是相当标准的，但是在第二个处理程序中，是的，您有一个状态对象变异

handleAdd = (e) => {
  const index = this.state.scanlist.findIndex((row) => row.ref === e.ref && row.lot === e.lot);
  let scancopy = this.state.scanlist;
  scancopy[index].qty = scancopy[index].qty + 1; // <-- state object mutation
  this.setState({ scanlist: scancopy });
};

---

第一种方法仍然会变异数组元素，它们也需要复制。第二，使用JSON进行序列化/反序列化是非常反模式的。这提高了稳定性，但使用此数据的一个嵌套组件仍然存在问题。哦。浅拷贝是否仍然会变异数组元素@德雷雷泽。我也编辑了深度复制的解决方案，谢谢。@drewrese你认为我的第一个函数也需要更改吗？还是在JS/React中正确？数组的浅层复制只是意味着你有一个新的数组引用，但数组元素仍然是对复制数组的对象的引用。第一个方法仍然变异数组元素，它们也需要被复制。第二，使用JSON进行序列化/反序列化是非常反模式的。这提高了稳定性，但使用此数据的一个嵌套组件仍然存在问题。哦。浅拷贝是否仍然会变异数组元素@德雷雷泽。我也编辑了深度复制的解决方案，谢谢。@drewrese您认为我的第一个函数也需要更改吗？或者在JS/React中正确吗？数组的浅层复制只是意味着您有一个新的数组引用，但数组元素仍然是对复制数组对象的引用。这是否回答了您的问题？这回答了你的问题吗？