El siguiente código está provocando que se realicen 2 solicitudes a mi API con el punto final GET. No entiendo useEffect() lo suficiente como para saber dónde comenzar a depurar, pero no quiero causar una tensión innecesaria en los servicios a los que estos puntos finales API llamarán del lado del servidor. Esto se debe a que llamarán a los servidores de Windows para que activen las solicitudes de eliminación en el directorio activo, etc.

 function Ad() { const [data, setData] = useState(null) const [isLoading, setLoading] = useState(false) useEffect(() => { setLoading(true) fetch('../api/decom/ad') .then(response => response.json()) .then(data => { setData(data) setLoading(false) if (data.exists == true) { Remove() } }) }, []) const Remove = () => { fetch("../api/decom/ad", { method: "DELETE" }) .then(response => response.json()) .then(data => { var inner = "" if (data.removed == true) { inner = `<p>Removed: ${greenCircle}</p>` } else { inner = `<p>Removed: ${redCircle}</p>` } document.getElementById('adremoved').innerHTML = inner }) } if (data != null && data.exists == true) return ( <a className={styles.card}> <h2>AD</h2> <p>Exists: { greenCircle } </p> <div id ="adremoved" className={styles.parent}> <p className={styles.child}>removed:</p> <div><div className={styles.loader}><div></div><div></div><div></div></div></div> </div> </a> ) if (data != null && data.exists == false) return ( <a className={styles.card}> <h2>AD</h2> <p>Exists: {redCircle} </p> <p>Removed:{redCircle}</p> </a> ) if (isLoading) return ( <a className={styles.card}> <h2>AD</h2> <div className={styles.parent}> <p id="adstatus" name="adstatus" className={styles.child}>Exists:</p> <div id="adloader"><div className={styles.loader}><div></div><div></div><div></div></div></div> </div> <p>Removed:{redCircle}</p> </a> ) }