Merhaba;
Notu sildikten sonra servera tekarar istek atabilirsiniz yada sadece listenizden silebilirsiniz. React kullanıyorsanız böyle birşey oluyor
su sekilde bir notunuz olduğunu varsayalım
interface Note {
id Number
title string
description string
}
şu şekilde bir state oluşturup sayfada gözükecek notlar
const [notes, setNotes] = useState<Note[]>([] as Note[])
sayfa açıldığında notları sunucudan çekmek için
useEffect(()=>{
fetch("server_url/notes")
.then( d => d.json()).then( data => setNotes(data) )
}, [])
notları silmeye yarayan click handleri
const handleDeleteNote = async (id: number) => {
const response = await fetch("server_url/notes/" + id, {
method: "delete"
})
if(response.status == 202) {
const newNotes = notes.filter( n => n.id != id)
setNotes(newNotes)
// yada burada sunucuya tekrardan istek at
}
}
buda yukarıdaki notları render etsin diyelim
return (
<ul>
{notes.map( n => <li key={n.id}>
{n.id} - { n.title }
<button
onClick={() =>handleDeleteNote(n.id)}>
sil
</button>
</li>)}
<ul/>
)
componentin tamami böyle birşey oluyor
import { useState, useEffect } from "react"
interface Note {
id Number
title string
content string
}
function NoteListComp() {
const [notes, setNotes] = useState<Note[]>([] as Note[])
useEffect(()=>{
fetch("server_url/notes")
.then( d => d.json()).then( data => setNotes(data) )
}, [])
const handleDeleteNote = async (id: number) => {
const response = await fetch("server_url/notes" + id, {
method: "delete"
})
if(response.status == 202) {
const newNotes = notes.filter( n => n.id != id)
setNotes(newNotes)
// yada burada sunucuya tekrardan istek at
}
}
return (
<ul>
{notes.map( n => <li key={n.id}>
{n.id} - { n.title }
<button
onClick={() =>handleDeleteNote(n.id)}>
sil
</button>
</li>)}
<ul/>
)
}
export NoteListComp
