Tengo 2 estados de producto y variaciones. Llamo a una API y establezco los valores de ambos estados en la respuesta de la API.
Quiero que el estado del producto permanezca como está y no se actualice
const [product, setProduct] = useState({} as any); const [variations, setVariations] = useState([] as any); useEffect(() => { const getProduct = async () => { const data = await axios.get("/products?id=4533843820679"); console.log(data); setProduct(data.data); // @ts-ignore setVariations([data.data]); }; getProduct(); }, []);A cambio, mapeo la matriz de variaciones y devuelvo las entradas para el título, el precio y un botón para agregar variaciones. Agregar variaciones agregará otro producto a la matriz de variaciones. Entonces simplemente empuja el producto a variaciones.
Luego tengo entradas para título en variación y precios en variación.variantes. El problema es con onChange.
Cuando cambio el precio de un elemento en variantes, cambia para todos y también lo cambia para el estado PRODUCTO.
El código se puede encontrar aquí: https://codesandbox.io/s/smoosh-firefly-6n747?file=/src/App.js
Agregue variaciones, cambie los precios, agregue otras variaciones y verá todos los problemas a los que me enfrento.
Es por esto:
variant.price = e.target.value; // same issue with title la referencia del objeto de la variant se comparte entre las variaciones y usted la está modificando directamente. Se comparte porque hiciste una copia superficial de una variation usando ... al agregarla.
Aquí está la solución:
Debe actualizar el objeto variant específico de manera inmutable (en reacción, siempre debe actualizar el estado de manera inmutable). Para eso necesitas usar esto como onChange for price :
onChange = { (e) => { let updated = variations.map((x) => { if (x.id === variation.id) { return { ...x, variants: x.variants.map((y) => { if (y.id === variant.id) { return { ...y, price: e.target.value }; } return y; }) }; } return x; }); setVariations(updated); } } Esto para onChange por title :
onChange = { (e) => { let updated = variations.map((x) => { if (x.id === variation.id) { return { ...x, title: e.target.value }; } return x; }); setVariations(updated); } }NOTA , pero los ID de las variaciones deben ser diferentes. Para fines de prueba, puede usar esto como controlador de clics al agregar una nueva variación:
onClick = { () => { setVariations((prev) => [...prev, { ...product, id: Math.floor(Math.random() * 1000) // for testing }]); } }Primero, no está empujando el producto a variaciones. Lo estás sobrescribiendo.
Para enviar un valor a la matriz con useState,
setVariations([...variations, product])Pero, si cambia el objeto del producto, las variaciones también cambiarán porque es el mismo objeto. (Tal vez, reaccionar no va a volver a renderizarlo, pero créanme, está cambiado). Si desea mantenerlo igual, debe crear un nuevo objeto.
Asi que,
setProduct(data.data); setVariations([...variations, {...data.data}]);Ahora, puedes cambiar de producto . las variaciones no van a cambiar.
Esto se debió a que hiciste una copia superficial de un objeto.
Intenta hacer así:
setVariations([...variations, data.data,]);