Question

我是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的对象

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

我是新来的，我不知道这是正确的方法还是Im变异或犯了任何错误。

我将不胜感激。

Answer 1

您在selectedObject处突变了selectedObject['new property'] = 'value for new property';

要解决此问题，您需要执行以下操作： console.log([...newArray, { ...selectedObject }]);

一些我建议改进的地方：

div在语义上不是可点击元素。反应应该在控制台中抱怨。
学习如何使用redux
致力于更好的处理程序命名（handleSomeAction，onSomeAction等）
我建议您在用例中使用reduce fn。

// 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;
}, [])

探索这些库：

redux
lodash
重新选择

如何避免以正确和高性能的方式改变React中的局部状态

1 个答案: