Javascript 如何避免在以正确和高效的方式进行反应时发生局部状态突变

我是React的新手，我正在努力学习更多关于状态不变性的知识。 “我的状态”属性的形状是一个对象，它可以有一个或多个属性来容纳一个对象数组

我在类中为用户单击div时创建了一个处理程序

  clickDivHandler = (stateProperty, id) => {
    let newArray = [...this.state[stateProperty]];
    let selectedObject = newArray.filter(element => element.id === id)[0];
    selectedObject['new property'] = 'value for new property';

    newArray = newArray.filter(element => element.id !== id);

    console.log([...newArray, selectedObject]);
  }

基本上，当用户单击div时，函数会传递stateProperty（保存对象和对象数组）和该对象的id

然后，我为该属性创建了一个新数组，以避免对原始数组进行变异

然后我从数组中筛选出具有该特定id的对象

然后在指定给selectedObject的对象中创建一个新属性

然后从新数组中删除具有该id的对象

然后我记录一个包含其他对象和新对象的新数组

我是新来的，我不知道这是不是正确的方式，或者我是否变异或犯了任何错误

---

我将非常感谢您的建议。

您在这里修改了

selectedObject

selectedObject['newproperty']='value for newproperty'

要解决此问题，您需要执行以下操作：
console.log（[…newArray，{…selectedObject}]）

我建议改进以下几点：


div
在语义上不是可单击的元素。您应该在控制台中对此进行投诉
了解如何使用
redux
改进处理程序命名（handleSomeAction、onSomeAction等）
我建议在您的用例中使用
reduce
fn

探索这些LIB：


重演
洛达斯
重选
您在这里变异了
selectedObject
selectedObject['newproperty']='value for newproperty'

要解决此问题，您需要执行以下操作：
console.log（[…newArray，{…selectedObject}]）

我建议改进以下几点：


div
在语义上不是可单击的元素。您应该在控制台中对此进行投诉
了解如何使用
redux
改进处理程序命名（handleSomeAction、onSomeAction等）
我建议在您的用例中使用
reduce
fn

探索这些LIB：


重演
洛达斯
重选

// rough example
this.state[stateProperty].reduce((acc, el) => {
  if (el.id === id) {
    acc.push({ ...el, new: 'value for new property' })
  } else {
    acc.push(el);
  }
  return acc;
}, [])