无法独立管理数组中的对象

Question

我正在使用 React 开发文本编辑器，我想跟踪数组中的更改。每当我进行更改时，都会将一个对象添加到数组中（应该如此），但所有其他对象也会更改并与新对象相同。我知道 Javascript 如何在不重新分配的情况下不将对象存储在自变量中所以我使用展开运算符创建一个新数组然后使用 Object.assign() 添加一个新对象但它仍然无法正常工作而且我不知道我做错了什么。

getNewChangesHistory(update, oldChangesHistory){
  var newChangesHistory = [...oldChangesHistory, Object.assign({}, update)];
  if(newChangesHistory.length > 25){
    delete(newChangesHistory[26]);
  }
  return newChangesHistory;
}

updateDocumentContent(content){
  var newDocument = {...this.state.document};
  newDocument.content = content;

  this.setState(prevState => {return {
    document: newDocument,
    changesHistory: this.getNewChangesHistory(content, prevState.changesHistory),
    hasChanges: true
  }})
}

updateTextbox(editedProperties, key){
  const newDocumentContent = {...this.state.document.content};
  newDocumentContent.textboxes[key] = { //Textboxes are stored as objects of an array
    ...editedProperties,
    id: key
  }
  this.updateDocumentContent(newDocumentContent)
}

render(){
  return(
    <TextBox 
      onEdit={(editedProperties) => {this.updateTextbox(editedProperties, 0)}}
    />
  )
}

Answer 1

问题出在updateTextbox。使用 {...this.state.document.content} 它只会创建一个浅表副本。在此副本中，textboxes 属性仍将引用 相同的 对象。然后你通过赋值给它的 [key] 属性来改变这个对象。因此，在具有相同 textboxes 对象引用的所有对象中都会看到该突变。

摆脱这种情况的一种方法是将 textboxes 视为不可变的，然后这样做：

updateTextbox(editedProperties, key){
  const {content} = this.state.document;
  const newDocumentContent = {
    ...content,
    // create a new textboxes array
    textboxes: Object.assign([], content.textboxes, {
      [key]: {
        ...editedProperties,
        id: key
      }
    })
  };
  this.updateDocumentContent(newDocumentContent);
}

无法独立管理数组中的对象

Unable manage objects in array independently

javascript

reactjs