时间戳

首页 > 解决方案 > 使用 graphql 和 axios 将项目添加到数据库后，在 React useEffect() 中获取数据会使应用程序崩溃

reactjs - 使用 graphql 和 axios 将项目添加到数据库后，在 React useEffect() 中获取数据会使应用程序崩溃

问题描述

最初initialFetch为 true，因此每当组件呈现 graphql 和 axios 时，都会从 db 中获取数据。然后将initialFetch设置为 false。

一旦通过 graphql 和 axios 将事件添加到 db 中，添加的状态变量就会设置为 true。由于 useEffect 依赖于添加它应该重新渲染组件并应该从数据库中获取数据。但是由于某种原因，它失败了，正如我在下面提到的 axios 无法与服务器通信。

笔记！我使用 GraphQL 从 MongoDB 获取数据

const [added, setAdded] = useState(false)
const [initialFetch, setInitialFetch] = useState(true)

useEffect(() => {
    const fetchEvents = () => {   
    
        console.log('inside fetchEvents()')
        const headers = {
                'Content-Type': 'application/json'
            }
        
        const requestBody = {
            query: `
                query {
                    events {
                        _id
                        title
                        description
                        price
                    }
                }
            `
        }
        
        const body = JSON.stringify(requestBody)
        
        console.log('awaiting for events from db')
        
        axios.post('http://localhost:5000/graphql', body, {headers}).then((res) => {
            console.log('events fetched from db')
            setEvents(res.data.data.events)
        }).catch((err) => {
            console.log(err)
        })
    }
    
    if (initialFetch) {
        setInitialFetch(false)
        console.log('initial fetch')
        fetchEvents()
    }
    
    if (added) {
        setAdded(false)
        console.log('added, fetching again')
        fetchEvents()
    }
    
}, [added, initialFetch])

这里 axios 无法将数据添加到 db 并且在等待超过 2 分钟后执行catch(err)块并且应用程序崩溃。每次我尝试时，axios 不断发布数据的以下代码都会失败。

const handleConfirm = () => {
    
    // request to backend
    const headers = {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${authContext.token}`
        }
    
    const requestBody = {
        query: `
            mutation {
                createEvent(title: "${title}", description: "${desc}", price: ${price}, date: "${date}") {
                    _id
                    title
                    description
                    price
                }
            }
        `
    }
    
    const body = JSON.stringify(requestBody)

    console.log('adding to db')
    
    axios.post('http://localhost:5000/graphql', body, {headers}).then((res) => {
        setAdded(true)
        console.log('added item to db')
        console.log(res.data)
    }).catch((err) => {
        console.log(err)
    })
}

初始提取发生，我将数据添加到数据库。添加到数据库后，我应该从数据库重新获取事件，而不是重新渲染失败并且应用程序崩溃。

标签： reactjsgraphql

解决方案

该错误是代码中存在无限循环的典型标志。当无限循环是由于无限递归引起的时，这种情况尤其常见。每次调用函数时，JS 都必须为堆栈帧分配一些堆栈空间。如果该函数总是调用自己，那么它将继续尝试分配越来越多的空间，直到最终由于没有更多的内存可供分配而崩溃。

尝试删除代码块fetchEvents()中无人看管的调用。useEffect()

推荐阅读