0
124
ViewsAxios y fetch ambos en Reactjs están haciendo una solicitud continua de red localhost
Este es el código de ruta del backend express y la base de datos MongoDB y la llamada normal desde el frontend con fetch("/") devolvía el código index.html y al agregar fetch("http://localhost:9000") devolvía el error CORS así que agregué app.use(cors()) .
router.get("/", async (req, res) => { Journal.find({}, function (err, journals) { if (err) { res.send("Something went wrong"); } res.json(journals); }); });Esta es la solicitud de axios y fetch realizada desde el frontend de reactjs, al hacer la llamada de fetch y axios en "/" ya que en el backend no aparecía nada, solo se devolvía el código index.html, por lo que comencé a usar "http://localhost: 9000", entonces llegaban datos, pero surgió este problema de host local.
const [journals, setJournals] = useState([ { title: "Day 1", content: content_string }, ]); useEffect(() => { getJournalData(); }); // const getJournalData = async () => { // try { // const res = await fetch("http://localhost:9000/"); // const data = await res.json(); // setJournals(data); // console.log(data); // } catch (err) { // console.error(err); // } // }; const getJournalData = () => { axios .get("http://localhost:9000/") .then((res) => { setJournals(res.data); }) .catch((err) => console.error(err)); };Esta es la pestaña de red de chrome-dev-tools:
Contenido de la consola
React está trabajando en localhost: 3000 Express está trabajando en locahost: 9000
proxy:http://localhost:9000 se agrega en package.json en la aplicación de reacción de frontend
Por favor, dígame qué está pasando y cómo puedo solucionarlo. Gracias
1 answers
Answer question0
Sin usar una matriz de dependencias, cada cambio activará su useEffect para que se ejecute nuevamente.
Entonces, cada renderizado, cada cambio de estado hará que crees otras llamadas a la API.
Hablemos de la variante useEffect:
useEffect(() => { // invoking on every re-render }) useEffect(() => { // invoking on component did mount (once) }, []) useEffect(() => { // invoking on component did mount and with every change on counter }, [counter])Entonces, cambia tu código:
useEffect(() => { getJournalData(); }, []);