Tengo una API muy básica y todo lo que hace es devolver el texto "Día soleado".
Creo un proyecto de reacción usando crear la aplicación de reacción e intento llamar a la API una vez y luego imprimo el resultado en la consola.
Aquí está la aplicación de reacción.
import logo from './logo.svg'; import './App.css'; function App() { fetch('https://localhost:44386/weatherforecast') .then(response => response.text()) .then(data => console.log(data)); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;El problema es que se llama a la API dos veces al cargar la página.
¿Alguien puede explicar por qué?
En general, si desea ejecutar algo una vez, como obtener algo de la API al cargar la página, debe usar el useEffect con una matriz de dependencia vacía como esta:
React.useEffect( () => { fetch('https://localhost:44386/weatherforecast') .then(response => response.text()) .then(data => console.log(data)); }, []) // <--- empty dependency array Editar: Esto también podría ser causado por <StrictMode> . Tiene la intención de hacer que React se renderice dos veces en el modo de desarrollo para que pueda brindarle sugerencias sobre cómo puede mejorar su código y el uso de ganchos. ¡Esa podría ser la razón por la que su aplicación se procesa dos veces!
La API se llama dos veces porque su aplicación se procesa dos veces por algún motivo. Por qué el componente se procesa dos veces es otra pregunta para la que puede encontrar una respuesta en este subproceso de SO .
Dado que está llamando al punto final de esa manera, cada vez que su componente represente, se realizará una llamada a la API. Para evitar eso, puede agregar la llamada API en un useEffect y hacer que se ejecute solo la primera vez que se procesa su componente. ( Más sobre useEffect )
useEffect(() => { fetch('https://localhost:44386/weatherforecast') .then(response => response.text()) .then(data => console.log(data)); }, []);La razón es porque es posible que tenga instalado un trabajador de servicio. intente ejecutar el programa con
yarn start --no-service-worker o
npm start --no-service-worker