Reactjs 在使用graphql和axios将项添加到数据库后，在React useEffect（）中获取数据会导致应用程序崩溃

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

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

注意！我使用GraphQL从MongoDB获取数据

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

---

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

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

---

尝试删除

useffect（）

代码块中对

fetchEvents（）

的无保护调用。

是的，应用程序在递归和无限期更新状态时肯定会崩溃

---

每次更新添加的

的值时，都会触发
useffect
，当
useffect
触发时，它会触发axios.post，它会再次更新状态
added
`if（added）{fetchEvents（）setAdded（false）}fetchEvents（）`-
fetchEvents
在有条件和无条件的情况下激发…`setAdded（false）`changes
added
（无论什么值）并通过依赖于
added
检查/显示原始网络变异请求重新运行效果。。。变量应该通过“variables”对象传递，而不是通过字符串操作
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])

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