Estoy tratando de hacer un uso genérico de Axios hook en React. Me gustaría poder importar este enlace a otros componentes para realizar solicitudes de obtención, publicación y eliminación. Creé el enlace y funciona bien para hacer solicitudes de obtención, pero no sé cómo hacer que funcione para las solicitudes de publicación/eliminación.

El problema es que estaría haciendo la solicitud Publicar/Eliminar cuando un usuario hace clic en un botón Guardar o Eliminar, pero no puedo llamar a un gancho React desde una función de controlador de eventos o desde useEffect.

A continuación se muestra el gancho genérico que creé:

 import { useState, useEffect } from "react"; import axios from "axios"; export interface AxiosConfig<D> { method?: 'get' | 'post' | 'delete' | 'put'; url: string; data?: D; params?: URLSearchParams; } export const useAxios = <T, D = undefined >(config: AxiosConfig<D>) => { const [responseData, setResponseData] = useState<T>(); const [isLoading, setIsloading] = useState(true); const [isError, setIsError] = useState(false); useEffect(() => { const controller = new AbortController(); const axiosRequest = async () => { try { const response = await axios({ ...config, signal: controller.signal }) setResponseData(response.data) setIsloading(false); } catch (error) { setIsError(true); setIsloading(false); } } axiosRequest(); return () => { controller.abort(); } }, [config.url, config.method, config.data, config.params]) return {responseData, isLoading, isError} }

Y este es un ejemplo de un componente en el que me gustaría realizar una solicitud de eliminación

 import { useParams } from 'react-router'; import { useAxios } from '../../api/hooks/useAxios'; export interface IItem { title: string; info: string; } export default function Item() { const { id } = useParams<{id?: string}>(); const {responseData: item, isLoading, isError} = useAxios<IItem>({ method: 'get', url: `http://localhost:3000/items/${id}` }) const handleDelete = () => { //not sure what to do here. Need to make DELETE request } return ( <div> {isLoading && <p className='loading'>Loading...</p>} {isError && <p className='error'>Could Not Load Item</p>} {item && ( <> <h2>{item.title}</h2> <p>{item.info}</p> <button onClick={handleDelete}>Delete</button> </> )} </div> ) }

Podría simplemente hacer la solicitud de axios directamente en el componente Item y no usar mi enlace useAxios, pero luego terminaría repitiendo el código en toda la aplicación.