所用挂钩的参考文件:
import {default as React, useCallback, useEffect} from 'react';
import StoreSelection from './StoreSelection';
// This doesn't need to be created in your component.
// Creating it once, outside the component, is an optimization:
function calculatePrice (cart) {
let updatedPrice = 0;
// console.log(list);
for (const item of cart){
// console.log(item.quantity);
updatedPrice += parseFloat(item.price) * item.quantity;
}
return updatedPrice;
}
export default function Store ({cart, inventory, setCart, setPrice}) {
// You can calculate the new price every time the cart changes by updating it
// in response to changes in the cart state:
useEffect(() => setPrice(calculatePrice(cart)), [cart]);
// However, if you don't manually update the price state in other places,
// then it doesn't need to be state at all. You can just create it this way
// in the parent component where it was defined:
// const price = useMemo(() => calculatePrice(cart), [cart]);
const cart_addItem = useCallback(item => {
// In your question's code it appears as though it is not certain that
// the added item's `quantity` property is set. If that's not the case,
// then you can simply delete the following statement. If it is
// `undefined` or `null`, then this will set it to `1`:
item.quantity ??= 1;
// Use the functional form of the argument to `setCart`. This way,
// it will not depend on an external state value (so it will
// always be current and also won't be needed in the dependency array):
setCart(cart => {
const index = cart.findIndex(currentItem => currentItem.id === item.id);
const updatedCart = [...cart];
if (index >= 0) {
// Be sure not to mutate the item object within in the cart state:
const updatedItem = {...updatedCart[index]};
updatedItem.quantity += item.quantity;
updatedCart[index] = updatedItem;
}
else updatedCart.push(item);
return updatedCart;
});
}, [setCart]);
return (
<div>
<StoreSelection {...{cart_addItem, inventory}}/>
</div>
);
}