Estaba solicitando datos de un servidor GraphQL usando la función de búsqueda en un archivo al que llamé fetching.js como se muestra a continuación. Sin embargo, se llamó a fetchQuery() dos veces.
module.exports = { fetchQuery: function(query){ console.log("fetchQuery started") return fetch('http://localhost:4000/', { method: 'POST', headers: {"Content-Type": "application/json"}, body: JSON.stringify({ query: query }) }).then(res => { return res.json() }) }, B: function(){ console.log("This is function B. This is just a test.") } }Así llamo a fetchQuery(). Estaba tratando de convertir los datos JSON en una barra de navegación en reacción. Este es el código hasta ahora.
import React from 'react' import '../App.css'; import {fetchQuery} from '../fetching' function NavBar() { fetchQuery(` query{ categories{ name } } `).then(data => { const tab = document.createElement('a') tab.innerText = data.data.categories[0].name tab.href = "/" + tab.innerText const leftSide = document.getElementById('leftNavElements') tab.innerText = data.data.categories[0].name leftSide.append(tab) }) return ( <div className = "NavBar"> <div className = "leftSide" id = "leftNav"> <div className = "links" id="leftNavElements" > <a href = "/">ALL</a> </div> </div> <div className = "centerSide"> Logo </div> <div className = "rightSide"> Cart & Currency Change </div> </div> ); } export default NavBar;Por favor, hágame saber cómo podría solucionar el error.
Usar la manipulación nativa de dom como document.createElement() es una mala práctica en reaccionar.
De todos modos, envolver su fetchQuery en useEffect debería solucionar su problema:
import { useEffect } from 'react' useEffect(() => { fetchQuery(` query{ categories{ name } } `).then(data => { const tab = document.createElement('a') tab.innerText = data.data.categories[0].name tab.href = "/" + tab.innerText const leftSide = document.getElementById('leftNavElements') tab.innerText = data.data.categories[0].name leftSide.append(tab) }) , [])