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]);

让我知道怎么回事！

React挂钩中的渲染问题

1 个答案: