Tengo una tienda esbelta que usa estos datos:
{ "books": [
{
"id": "F0tE_25",
"title": "Abc",
...
},
"id": "zNPAQit",
"title": "Ny, Ny",
...
}
]
}
Edito un libro en un formulario y llamo a la función a continuación para actualizar la tienda (id es la identificación del libro para actualizar y bookData es la información actualizada (del formulario):
updateBook: (id, bookData) => {
bookstore.update(items => {
const index = items.findIndex(i => i.id ===id)
const updatedBook = {...items[index], ...bookData}
const updatedBooks = [...items]
updatedBooks[index] = updatedBook
return updatedBooks
})
}
Funciona. Simplemente parece un montón de malabares para realizar una actualización. ¿Se preguntaba si había una mejor manera?
Hay algunos problemas asociados con el enfoque en la pregunta, a saber, el uso de findIndex . Si el elemento con la identificación dada no existe, el valor del index será -1 , lo que hará que los items[index] no estén undefined y serán la causa de otro comportamiento no deseado.
Puede usar .map() para eliminar y simplificar la actualización. Aquí hay un ejemplo.
updateBook: (id, bookData) => {
bookstore.update(items =>
items.map(item => {
if (item.id === id) {
return { ...item, ...bookData };
}
return item;
})
);
}
Editado: la respuesta de @ pilchard podría ser una implementación aún más clara con el uso del operador ternario.
updateBook: (id, bookData) => {
bookstore.update(items =>
items.map(item => {
return item.id === id ? { ...item, ...bookData } : item;
})
);
}
Espero que ayude.