这两个useEffects会产生长循环吗

Question

我正在编写一个React应用程序。我用了两个useEffects。一个CCD_ 2从firebase获得数据；cartItems"；以及"；totalAmount"；。

第二个useEffect具有这两个依赖关系，当这些依赖关系发生变化并覆盖数据模型时，它就会运行。

我认为这是毫无意义的循环(我可能错了(。如何解决并提高效率？我想转换到Redux Toolkit Actions，但首先我想用香草React来做。

useEffect(() => {
fetch('https://italianhouse-1aef0-default-rtdb.europe-west1.firebasedatabase.app/cart.json')
.then(res => res.json())
.then(data => {
console.log(data)
const keys = Object.keys(data.cartItems)
keys.forEach(key => dispatch(cartActions.getCartData(data.cartItems[key])))
dispatch(cartActions.setFetchedTotalAmount(data.totalAmount))

})
}, [dispatch])
useEffect(() => {
fetch('https://italianhouse-1aef0-default-rtdb.europe-west1.firebasedatabase.app/cart.json', {
method: 'PUT',
body: JSON.stringify({cartItems: cartItems, totalAmount: totalAmount}),
headers: {
'content-type': 'application/json'
}
})
}, [cartItems, totalAmount])

Answer 1

• 看起来像是你的第一个useEffect在循环中推动你。

• 将空数组作为第二个参数传递给useEffect，使其仅在装载和卸载时运行。

  useEffect(((=>{。。。}，[](；

Answer 2

我已经通过使用额外的布尔解决了这个问题

let isInitial = true
useEffect(() => {
fetch('https://italianhouse-1aef0-default-rtdb.europe-west1.firebasedatabase.app/cart.json')
.then(res => res.json())
.then(data => {
const keys = Object.keys(data.cartItems)
keys.forEach(key => loadedMeals.push(data.cartItems[key]) )
dispatch(cartActions.replaceCart(loadedMeals))
dispatch(cartActions.setFetchedTotalAmount(data.totalAmount))
isInitial = false
})
}, [dispatch])

useEffect(() => {
if (isInitial) return

fetch('https://italianhouse-1aef0-default-rtdb.europe-west1.firebasedatabase.app/cart.json', {
method: 'PUT',
body: JSON.stringify({cartItems: cartItems, totalAmount: totalAmount}),
headers: {
'content-type': 'application/json'
}
})

}, [cartItems, totalAmount])