In meiner App werden die Notizen nicht korrekt aktualisiert [geschlossen] ⇐ JavaScript

[Anonymous]

Ich habe ein Problem. Wenn ich eine Notiz aktualisiere oder lösche, werden die Änderungen nicht im Abschnitt „Meine Notizen“ angezeigt. Ich vermute, das liegt daran, dass die Signale in der Datei obtenerFormulario.tsx nicht richtig implementiert sind.
App-Github-Link:

https://github.com/NachoCano123/AppNotas/tree/main
App-Link:
https://appnotas-rzjc42pkh960.nachocano123.deno.net/
Jede Hilfe wäre sehr dankbar.

Code: Select all

//routes/enviar_nota.tsx
import { Handlers, PageProps } from "$fresh/server.ts";
import { Nota, notas } from "../Types.ts";
import Notas from "../components/Notas.tsx";
import { Signal, signal } from "@preact/signals";

export const handler: Handlers = {
GET(_req, ctx) {
const notesSignal = signal(notas);
return ctx.render({ notes: notesSignal });
},
};

export default function Page(props: PageProps) {
return ;
}

Code: Select all

//islands/NotasInteractivas.tsx
import { Signal } from "@preact/signals";
import { useState } from "preact/hooks";
import { Nota } from "../Types.ts";

type Props = {
notes: Signal;
};

export default function NotasInteractivas({ notes }: Props) {
const [editingId, setEditingId] = useState(null);
const [editForm, setEditForm] = useState({
title: "",
content: "",
category: ""
});

const BorrarNota = (id: number) => {
notes.value = notes.value.filter(nota => nota.id !== id);
console.log("Nota borrada con ID:", id);
};

const IniciarEdicion = (nota: Nota) => {
setEditingId(nota.id);
setEditForm({
title: nota.title,
content: nota.content,
category: nota.category
});
};

const GuardarEdicion = () => {
if (editingId === null) return;

notes.value = notes.value.map(nota => {
if (nota.id === editingId) {
return {...nota, ...editForm};
}
else {
return nota;
}
});

CancelarEdicion();
console.log("Nota editada con ID:", editingId);
};

const CancelarEdicion = () => {
setEditingId(null);
setEditForm({ title: "", content: "", category: "" });
};

const ManejarCambio = (field: string, value: string) => {
setEditForm(prev => ({ ...prev, [field]: value }));
};

return (

{notes.value.map((nota) => (

{editingId === nota.id ? (

 ManejarCambio("title", (e.target as HTMLInputElement).value)}
className="edit-input"
placeholder="Título"
/>
 ManejarCambio("category", (e.target as HTMLInputElement).value)}
className="edit-input"
placeholder="Categoría"
/>
 ManejarCambio("content", (e.target as HTMLTextAreaElement).value)}
className="edit-textarea"
placeholder="Contenido"
/>


Guardar


Cancelar



) : (

{nota.title}
{nota.category}
{nota.content}

 IniciarEdicion(nota)}
>
Editar

 BorrarNota(nota.id)}
>
Borrar



)}

))}

);
}