获取函数被调用两次

Question

我在一个名为 fetching.js 的文件中使用提取函数从 GraphQL 服务器请求数据，如下所示。但是，fetchQuery() 被调用了两次。

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.")
    }
 
}

这就是我调用 fetchQuery() 的方式。我试图将 JSON 数据渲染到导航栏中。这是到目前为止的代码。

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;

请告诉我如何解决该错误

Answer 1

使用像 document.createElement() 这样的原生 dom 操作在 React 中是一种不好的做法。

无论如何，将您的 fetchQuery 包装在 useEffect 中应该可以解决您的问题：

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)

    })

, [])

获取函数被调用两次

Fetch function is called twice

javascript

reactjs

graphql