Tengo un componente de carrito de compras al que pasé un accesorio useState para actualizar la cantidad de artículos dentro del carrito de compras/la cantidad de dinero que vale el carrito:
import { data } from "./data"; export default function StoreItems({ addToCart, Total, setTotal }) { const addToTotal = (data) => { addToCart(); setTotal(Total + data.price); }; return ( <Grid container spacing={3}> {data.map((data) => ( <Grid item key={data.id} xs={12} sm={6} md={3}> <Card> <CardMedia image={data.image} /> <CardActions> <div> <Button>Buy</Button> <Button size="small" sx={{ marginLeft: "5px" }} onClick={addToTotal} > Add to Cart </Button> </div> </CardActions> </Card> </Grid> ))} </Grid> ); }Los datos son una matriz de JavaScript con objetos que se parece a:
export const data = [ { id: 1, title: "item 1", content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac aliquam nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.`, image: "https://source.unsplash.com/random/1", price: 5000, }, ];Y los accesorios se transmiten de:
function Store() { const [cartCount, setCartCount] = useState(0); const [Total, setTotal] = useState(0); const addToCart = () => { setCartCount(cartCount + 1); }; return ( <> <div> <StoreItems Total={Total} setTotal={setTotal} addToCart={addToCart} /> </div> </> ); } export default Store;¿Por qué no puedo agregar el precio de data.price al objeto useState - Total?
Hay un problema con la forma en que usa addToTotal en el componente StoreItems . Primero, la función espera que se pase un elemento de la matriz de data , pero no lo hace explícitamente. En su implementación, la función obtiene un evento de clic en lugar de un elemento de matriz de data . En segundo lugar, es mejor cambiar el nombre del primer argumento en la función de flecha del map porque confunde la matriz de data con sus elementos. Así es como necesita actualizar el componente para que todo funcione:
import { data } from "./data"; export default function StoreItems({ addToCart, Total, setTotal }) { const addToTotal = (item) => { addToCart(); setTotal(Total + item.price); }; return ( <Grid container spacing={3}> {data.map((item) => ( <Grid item key={item.id} xs={12} sm={6} md={3}> <Card> <CardMedia image={data.image} /> <CardActions> <div> <Button>Buy</Button> <Button size="small" sx={{ marginLeft: "5px" }} onClick={() => addToTotal(item)} > Add to Cart </Button> </div> </CardActions> </Card> </Grid> ))} </Grid> ); }Aquí hay un patio de juegos simplificado con la solución: https://stackblitz.com/edit/stackoverflow-71871965?file=src%2FStoreItems.js
Primero cambia esto: data.map((data) => ....
a esto :
data.map((item) => ....Debe pasar el precio a la función onClick:
<Button size="small" sx={{ marginLeft: "5px" }} onClick={() => addToTotal(item.price)}> Add to Cart </Button>y luego cambie la función addToTotal a esto:
const addToTotal = (price) => { addToCart(); setTotal(Total + price); };