Javascript 是否有更好的方法来更新数组中表示React组件状态的某些对象？

我有以下React组件这只是一个示例：

class MainForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       elements : [
         {
           id: 1, // this is never changed
           title: 'Element 1',
           data: {
              text: 'Initial text for Element 1',
              // other properties 
              ...
           }
         },
         .....
       ]
    };
  }
}

这里的状态是一个对象数组，与我的代码中的一样。数组中的所有元素都有id，此属性永远不会更改

我想更新这个数组-删除元素，添加新元素，最有趣的是-更新该数组中的一些现有元素

添加/删除很容易实现，但我一直在更新现有项目

我是新手，所以我的方法是这样的，可能有点贵：

updateElements = value => {
  // value is the object with some property updated
  /* example (data.text is updated)
      {
        id: 1,
        title: 'Element 1',
        data: {
          text: 'Updated text for Element 1',
          // other properties 
          ...
        }
      }   
    */

  // there is 'id' for each item so I do map to replace out-dated element with a new one
  const updatedElements = this.state.elements.
            .map(e => {
                if (e.id === value.id) {
                    return value;
                } else {
                    return e;
                }
            });

  this.setState({
    elements: updatedElements  
  });        
} 

在我的例子中，这个数组和其中存储的对象一样大

必须有一种更有效的方法来使用React或纯JavaScript，以使其性能更好

有什么建议吗？

没有，你明白了

编辑处于状态的数组中的项的最佳方法通常是映射到该项上，为大多数索引返回现有项，并使用所需的一个索引返回替换项

您说这非常昂贵，但是一个只进行很少处理并返回一个新数组（主要由对已经存在的对象的引用组成）的映射通常并不昂贵

---

如果您不想做这种杂耍，像和其他人一样的不可变数据库可以提供帮助。

这是一个JS问题，与React无关。请看一看