Estoy construyendo un sitio de gestión de almacenes. Tengo los datos almacenados en MongoDB. Quiero que la cantidad del producto se actualice al hacer clic en un botón y que se muestre en la interfaz de usuario. Pero después de actualizar la cantidad, cuando lo registro en la consola, me aparece indefinido.
Esta es la función para disminuir la cantidad al hacer clic y actualizarla en DB:
const ProductDetail = () => { const { productId } = useParams(); const [product] = useProductDetail(productId); const { _id, name, img, description, supplier, price, quantity } = product; const [updatedQuantity, setUpdatedQuantity] = useState(quantity); const handleDecreaseQuantity = (id) => { const { quantity, ...rest } = product; const previousQuantity = quantity; setUpdatedQuantity(previousQuantity - 1) const updatedProduct = { updatedQuantity, ...rest } fetch(`http://localhost:5000/updateProduct/${id}`, { method: 'PUT', headers: { "content-type": "application/json" }, body: JSON.stringify(updatedProduct) }) .then(res => res.json()) .then(data => { console.log(data) }) console.log(updatedQuantity); }Esta es la API de actualización del producto:
app.put('/updateProduct/:id', async (req, res) => { const updatedProduct = req.body; const { updatedQuantity } = updatedProduct; const id = req.params.id; const query = { _id: ObjectId(id) }; const options = { upsert: true }; const updateProduct = { $set: { quantity: updatedQuantity }, }; const result = await productCollection.updateOne(query, updateProduct, options); console.log(result); res.send(result); })Las acciones setState son asincrónicas y se procesan por lotes para mejorar el rendimiento. Esto se explica en la documentación de setState.
setState() no muta inmediatamente this.state sino que crea una transición de estado pendiente. Acceder a this.state después de llamar a este método puede potencialmente devolver el valor existente. No hay garantía de funcionamiento síncrono de las llamadas a setState y las llamadas pueden agruparse por lotes para mejorar el rendimiento.
Es posible que esta parte del código no se esté ejecutando como crees.
const previousQuantity = quantity; setUpdatedQuantity(previousQuantity - 1); const updatedProduct = { updatedQuantity, ...rest };Actualice la cantidad de su producto y envíelo a API. Cuando se complete la acción, su estado también podría actualizarse.
const previousQuantity = quantity; const updatedProduct = { updatedQuantity: previousQuantity - 1, ...rest }; setUpdatedQuantity(previousQuantity - 1);