Me gustaría que si hago clic en un enlace y el modal está abierto, la llamada a la API se ejecuta una vez. Desafortunadamente, siempre se ejecuta, hasta que el estado abierto es verdadero.
const [open, setOpen] = useState(false); const [content, setContent] = useState(); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); const fetchData = async (movieName) => { console.log("Fetching"); const { data } = await axios.get( `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&utf8=1&formatversion=latest&srsearch="${movieName}" articletopic:films` ); setContent(data); console.log(data); }; if (open) { fetchData(); }Debe usar useEffect hook para llamar a la API solo una vez cuando el componente está montado.
Reemplazar a continuación
if (open) { fetchData(); }con
import { useEffect } from "react"; ... ... useEffect(() => { fetchData(); }, []);Como está llamando directamente a fetchData cuando está open es verdadero. Cuando la llamada a la API tiene éxito, establece el setContent . Lo que activa el componente para volver a renderizar. Vuelve a llamar a la API y establece la nueva representación del estado y así sucesivamente. Llame a api dentro useEffect .
useEffect(() => { if (open) { fetchData(); } }, [open]);