删除请求与钩子反应原生

Question

当用户按下我定义项目的按钮时，我试图删除，但我没有这样做。你能帮我在按下按钮时删除项目吗？在 url 中，您可以看到我用于第一个获取请求的 json，然后我想为删除请求提供按钮操作。

 export default function Categories(){

    const [data,setData]=useState({});
    const categoriesUrl ="https://northwind.vercel.app/api/categories"
    const [name,setName]=useState([]);
    const [description,setDescription]=useState([]);
    const [id,setID]=useState([]);
    const [status,setStatus]=useState([]);

    useEffect(()=>{
    fetch(categoriesUrl)
    .then((response)=>response.json())
    .then((json)=>{
        setData(json);
    })
     .catch((error)=>console.error(error))   

    });
    

    const deleteApi=(id)=>{
        fetch("https://northwind.vercel.app/api/categories/"+id,{method: 'DELETE'})
        .then(()=>setStatus('Delete Successful'));  
    }
   

    return(
        <SafeAreaView>
        <View style={styles.container}>
            <FlatList 
            data={data} keyExtractor={({id},index)=>id}
            renderItem={({item})=>(
            <View style={{paddingBottom:10}}>
            <Text style={styles.categoriesText}>
            {item.id}.{item.description},{item.name}
            <Button onClick={()=>deleteApi(data.id)}></Button>
            </Text>  
            </View>
            )} >
            
            </FlatList>
        </View>
        </SafeAreaView>
    );

    };