React 钩子中的重新渲染问题

Question

每次更新购物车以更新购物车的calculatedPrice价格 state 时，我都想重新渲染我的浏览器。 我可以在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])

更新购物车 function

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

让我知道事情的后续！