Javascript 持续循环请求上的Navbar下拉购物车

我正在做一个电子商务项目。我目前正在使用Navbar购物车，但每当我检查Chrome Devtool时，它每分钟都会发送数千个请求。我通常对这种类型的查询使用useEffect，我尝试了它并将其置于条件之外，但它会在初始登录时显示以前用户的购物车，除非我在登录后刷新页面

我该怎么做才能使它是动态的，并且只有在有一个新添加的购物车项目，而不是一个不断循环的请求时才会发生变化

没有useEffect——它可以工作，但有一个不断循环的请求

const AppNavbar = (props) => {
    const { user } = useContext(UserContext)
    const [cartItems, setCartItems] = useState([])
    let navigation 

    if (user.token === null) {
        navigation = (
            <Nav className="ml-auto">
                <Nav.Link href="/register">Register</Nav.Link>
                <Nav.Link href="/login">Login</Nav.Link>
            </Nav>
        )
    } else {
        if (user.role === 'admin') {
            navigation = (
                <React.Fragment>
                    <Nav className="ml-auto">
                        <Nav.Link href="/">Menu</Nav.Link>
                        <Nav.Link href="/logout">Logout</Nav.Link>
                    </Nav>
                </React.Fragment>
            )
        } else {
            GQLClient({}).request(Query.getUserCart, { id: user.id }).then( ({getUserCart}) => {
                setCartItems(getUserCart.map( (cart) => 
                    <NavDropdown.Item key={cart._id}>
                        <Button type="button" onClick={ (e) => deleteCart(e, cart.id) } variant="danger" className="p-1">x</Button>
                        {cart.activityName}
                    </NavDropdown.Item>  
                ))
            })

            navigation = (
                <React.Fragment>
                    <Nav className="ml-auto">
                        <Nav.Link href="/">Menu</Nav.Link>
                        <NavDropdown title="Following">
                            {cartItems}
                            <NavDropdown.Divider />
                            <Nav.Link className="text-info" href="/follow-list">View Detailed List</Nav.Link>
                        </NavDropdown>
                        <Nav.Link href="/transactions">Transactions</Nav.Link>
                        <Nav.Link href="/logout">Logout</Nav.Link>
                    </Nav>
                </React.Fragment>
            )
        }
    }

const-AppNavbar=（道具）=>{
const{user}=useContext（UserContext）
常量[cartItems，setCartItems]=useState（[]）
让导航
if（user.token==null）{
导航=(
登记
登录
)
}否则{
如果（user.role==='admin'）{
导航=(
菜单
注销
)
}否则{
GQLClient（{}）.request（Query.getUserCart，{id:user.id}）。然后（{getUserCart}）=>{
setCartItems（getUserCart.map）（（购物车）=>
deleteCart（e，cart.id）}variant=“danger”className=“p-1”>x
{cart.activityName}
))
})
导航=(
菜单
{cartItems}
查看详细列表
交易
注销
)
}
}

使用useEffect——不再有请求循环，但显示以前用户的购物车。除非登录后刷新

const AppNavbar = (props) => {
    const { user } = useContext(UserContext)
    const [cartItems, setCartItems] = useState([])
    let navigation 

    useEffect( () => {
        if (user.role === 'customer'){
            GQLClient({}).request(Query.getUserCart, { id: user.id }).then( ({getUserCart}) => {
                setCartItems(getUserCart.map( (cart) => 
                    <NavDropdown.Item key={cart._id}>
                        <Button type="button" onClick={ (e) => deleteCart(e, cart.id) } variant="danger" className="p-1">x</Button>
                        {cart.activityName}
                    </NavDropdown.Item>  
                ))
            })
        }
    }, [])

    if (user.token === null) {
        navigation = (
            <Nav className="ml-auto">
                <Nav.Link href="/register">Register</Nav.Link>
                <Nav.Link href="/login">Login</Nav.Link>
            </Nav>
        )
    } else {
        if (user.role === 'admin') {
            navigation = (
                <React.Fragment>
                    <Nav className="ml-auto">
                        <Nav.Link href="/">Menu</Nav.Link>
                        <Nav.Link href="/logout">Logout</Nav.Link>
                    </Nav>
                </React.Fragment>
            )
        } else {
            navigation = (
                <React.Fragment>
                    <Nav className="ml-auto">
                        <Nav.Link href="/">Menu</Nav.Link>
                        <NavDropdown title="Following">
                            {cartItems}
                            <NavDropdown.Divider />
                            <Nav.Link className="text-info" href="/follow-list">View Detailed List</Nav.Link>
                        </NavDropdown>
                        <Nav.Link href="/transactions">Transactions</Nav.Link>
                        <Nav.Link href="/logout">Logout</Nav.Link>
                    </Nav>
                </React.Fragment>
            )
        }
    }

const-AppNavbar=（道具）=>{
const{user}=useContext（UserContext）
常量[cartItems，setCartItems]=useState（[]）
让导航
useffect（（）=>{
如果（user.role==='customer'）{
GQLClient（{}）.request（Query.getUserCart，{id:user.id}）。然后（{getUserCart}）=>{
setCartItems（getUserCart.map）（（购物车）=>
deleteCart（e，cart.id）}variant=“danger”className=“p-1”>x
{cart.activityName}
))
})
}
}, [])
if（user.token==null）{
导航=(
登记
登录
)
}否则{
如果（user.role==='admin'）{
导航=(
菜单
注销
)
}否则{
导航=(
菜单
{cartItems}
查看详细列表
交易
注销
)
}
}

能否显示以前使用的代码

useffect

？该代码听起来比此代码更接近正确。尽管您可以尝试的一个快速修复方法是仅在

carItems

为空时执行请求。目前，您有一个循环，因为您在每次渲染时都会执行请求，并且该请求始终会更改购物车项目，从而触发渲染，从而触发请求，等等。您好Garrett。我已经编辑了这篇文章并添加了useEffect尝试。谢谢我假设您正在另一个具有用户上下文的组件中呈现此组件，对吗？因此，您希望在用户更改时使所有子组件状态无效，对吗？是的，我在App.js中调用Navbar组件，这是用户状态的根所在，也是我页面的路由器所在。是的，但是我认为useEffect延迟了它，我认为这就是为什么初始登录显示前一个用户的购物车。除非我在登录后刷新