Estoy tratando de editar una base de datos JSON de turnos. Estoy escribiendo en Javascript usando reaccionar. Esta es mi comprensión de la sintaxis PUT:
const editShift = async (changed, id) => { const res = await fetch(`http://localhost:5000/shifts/${id}`, { method: 'PUT', headers: { 'Content-type': 'application/json' }, body: JSON.stringify(changed) }) const data = await res.json() setShifts([...shifts, data]) }datos.json:
{ "shifts": [ { "title": "test", "startDate": "2018-06-25T07:30:00.000Z", "endDate": "2018-06-25T08:00:00.000Z", "allDay": false, "id": 1 }, { "title": "test2", "startDate": "2018-06-28T07:30:00.000Z", "endDate": "2018-06-28T08:00:00.000Z", "allDay": false, "id": 2 } ] }El resultado es que el nuevo turno mantendrá solo los campos que se han modificado y eliminará el resto. ¿Alguna idea de por qué?
La solicitud PUT debería funcionar así.
Una solicitud PUT debe PONER los datos en el lugar del registro anterior. Le gustaría usar una solicitud PATCH solo para parchear datos en el registro anterior.
Aparte de eso, depende de su punto final /shifts sobre cómo se maneja esto realmente.
Para obtener turnos anteriores, debe usar una devolución de llamada dentro de setShifts como:
setShifts(prevShifts => ([...prevShifts, data]))Para una pregunta como esta, sería útil si publicara ejemplos de datos antes y después
Además, saber qué está haciendo su controlador de servidor ayudaría a determinar qué está pasando. Tengo la sensación de que lo que está pasando es algo como esto.
// API handler (req) => { const dbData = getDBData(); dbData.shifts = req.shifts; // overwrite old with new }Cuando lo que necesitas es algo como
(req) => { const dbData = getDBData(); req.shifts.forEach((newShiftData) => { const shiftId = newShiftData.id; if (dbData[shiftId]) { dbData[shiftId] = { ...dbData[shiftId], ...newShiftData }; // merge old with new } }); // - check if data changed // - update DB }