Estoy tratando de recopilar datos para insertar en la base de datos. Estoy usando estados de ganchos para este asunto.
Tengo un estado de productos:
const [product, setProduct] = useState( image: '', tags: [], available_colors: colors, available_sizes: talles, }) los colores available_colors dependen de otro estado que es una matriz de colores. Esta matriz se puede insertar con nuevos elementos y se imprimen en el html. Pero el problema es que no se actualiza en el estado de los products .
Aquí está el estado de los colores.
const [colors, setColors] = useState([ { name: 'blue' }, { name: 'green' }, { name: 'red' }, ])Lo estoy actualizando así:
const setColorsAttr = async () => { const value = await Swal.fire({ title: 'Nuevo Color', html: ` <input type="text" id="talle-input" class="swal2-input"/> `, showCancelButton: true, focusConfirm: false, preConfirm: () => { const color = Swal.getPopup().querySelector("#talle-input").value return color } }) if (value.isDismissed !== true) { setColors([ ...colors, { name: value.value } ]) setProduct({ ...product, [product.available_colors]: colors }) } }Pero en los productos no está cambiando. ¡Apreciaría tu ayuda! ¡Gracias por adelantado!
setColorsAttr forma un cierre sobre los colors actuales y setColors actualizará los colors en el siguiente renderizado, por lo que no puede usar los colors más recientes de inmediato.
Puedes usar useEffect con colores como una dependencia:
useEffect(() => { setProduct(previousProduct => ({...previousProduct, available_colors: colors})) }, [colors]) setProduct en setColorsAttr se puede eliminar
Esto sucede porque setState funciona de forma asincrónica, lo que significa que el estado no se actualiza de inmediato.
Para superar esto, debe actualizar el estado del producto en useEffect cuando se actualiza el color.
useEffect(() => { setProduct(previousProduct => ({...previousProduct, available_colors: colors})) }, [colors])Para obtener más información sobre el funcionamiento asíncrono de setState, consulta esto. ¿Por qué setState en reactjs Async en lugar de Sync?