¿Cómo actualizamos correctamente un elemento en un objeto? Estoy tratando de actualizar el elemento isComplete = true o false basic en los resultados de mi db.response
Si lo que tengo ya es correcto, ¿puede explicarme qué es lo que hace que funcione?
actualmente, estoy usando this.setState() al que estoy pasando un accesorio en mi componenteDidMount con los siguientes valores
{ "dbResponse": { "__v": 0, "_id": "6149f01736503d7aa9fb138b", "instantMessage": false, "isComplete": false }, "operationType": "todo_update" } // Works state = { list: [], // This list is filled from a prop on component did mount }; case 'todo_update': const {list} = this.state; //Find index of specific object using findIndex method. const objIndex = list.findIndex( obj => obj._id === data.dbResponse._id, ); //Update object's isComplete property. list[objIndex].isComplete = data.dbResponse.isComplete; break; // Does not work. It removes the last object case 'todo_update': const listStore = []; const {list} = this.state; //Find index of specific object using findIndex method. const objIndex = list.findIndex( obj => obj._id === data.dbResponse._id, ); //Update object's isComplete property. list[objIndex].isComplete = data.dbResponse.isComplete; listStore.push(list[objIndex]); setState({list: listStore}) break; case 'todo_update': const {list} = this.state; //Find index of specific object using findIndex method. const objIndex = list.findIndex( obj => obj._id === data.dbResponse._id, ); //Update object's isComplete property. list[objIndex].isComplete = data.dbResponse.isComplete; break; En este caso, state.list se actualiza, pero no vuelve a representar el Component . Porque list[objIndex].isComplete = data.dbResponse.isComplete; está actualizando su state sin usar setState esto se llama Data Mutation . Que no es una forma correcta de actualizar el state
// Does not work. It removes the last object case 'todo_update': const listStore = []; const {list} = this.state; //Find index of specific object using findIndex method. const objIndex = list.findIndex( obj => obj._id === data.dbResponse._id, ); //Update object's isComplete property. list[objIndex].isComplete = data.dbResponse.isComplete; listStore.push(list[objIndex]); setState({list: listStore}) break; En este listStore.push(list[objIndex]); es responsable de borrar sus datos anteriores. Dado que solo está presionando un único dato, listStore.push(list[objIndex]); .
case 'todo_update': // This will avoid DataMutation const {list} = { ...this.state }; //Find index of specific object using findIndex method. const objIndex = list.findIndex( obj => obj._id === data.dbResponse._id, ); //Update object's isComplete property. list[objIndex].isComplete = data.dbResponse.isComplete; // This will update your state and re-render setState({ list }) break;