React挂钩中的重新提交问题

Question

我想在每次更新购物车以更新购物车的calculatedPrice状态时重新呈现我的浏览器。我可以在useEffect中使用盒子中的cart来实现这一点，但我也在useEffect中获取数据，因此每次更新购物车时，我的浏览器都会从API重新蚀刻。有没有一种方法可以在不从API重新获取的情况下做到这一点？

React.useEffect(() => {
async function fetchData() {
const result = await axios(API)
const items = result.data.data.items.map((item) => {
item.count = 0
return item
})
setProducts(items)
}
fetchData()
setCalculatePrice(() =>
cart.reduce((price, product) => price + product.price, 0).toFixed(2),
)
}, [cart])

updateCart功能

const updateCart = React.useCallback(
(product, index) => {
const newCart = removeItemOnce(cart, product)
products[index].count = products[index].count - 1
setCart([...newCart])
setProducts(products)
},
[cart, products],
)

Answer 1

您可以将useEffects分离。甚至建议将它们分开。所以在你的情况下，我会这样做：

React.useEffect(() => {
async function fetchData() {
const result = await axios(API)
const items = result.data.data.items.map((item) => {
item.count = 0
return item
})
setProducts(items)
}
fetchData();
}, [])

这将在组件装载时调用一次。对于购物车更新

React.useEffect(() => {
setCalculatePrice(() =>
cart.reduce((price, product) => price + product.price, 0).toFixed(2),
);
}, [cart]);

让我知道进展如何！