Estoy trabajando en un editor de texto usando React y quiero realizar un seguimiento de los cambios en una matriz. Cada vez que hago cambios, se agrega un objeto a la matriz (como debería), pero todos los demás objetos también cambian y se vuelven iguales al nuevo. Soy consciente de que Javascript no almacena objetos en variables independientes si no se reasignan, así que utilicé el operador de propagación para crear una nueva matriz y luego agregué un nuevo objeto usando Object.assign() pero aún no funciona y puedo. t averiguar lo que estoy haciendo mal.
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)}} /> ) }El problema está en updateTextbox . Con {...this.state.document.content} solo crea una copia superficial. En esta copia, la propiedad de los textboxes de texto seguirá haciendo referencia al mismo objeto. Y muta ese objeto mediante la asignación a su propiedad [key] . Entonces esa mutación se verá en todos los objetos que tienen la misma referencia de objeto de textboxes de texto.
Una forma de deshacerse de esto es tratar los textboxes de texto como inmutables y hacer esto:
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); }