無法使用 Node.js 和 React.js 更新存儲在 MongoDB 中的產品數量

Question

我正在建立一個倉庫管理網站。 我將數據存儲在 MongoDB 中。我希望通過單擊按鈕更新產品數量並將其顯示在 UI 上。 但是在更新數量之后，當我控制台記錄它時，我得到了未定義。

這是 function 以減少點擊數量並在 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); }

這是產品更新 API：

 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); })

Answer 1

setState操作是異步的，並且是批處理的以提高性能。 這在 setState 的文檔中有解釋。

setState() 不會立即改變 this.state 而是創建一個掛起的 state 轉換。 調用此方法后訪問 this.state 可能會返回現有值。 無法保證對 setState 的調用同步操作，並且可以對調用進行批處理以提高性能。

這部分代碼可能不會像您想象的那樣執行。

const previousQuantity = quantity;
setUpdatedQuantity(previousQuantity - 1);
const updatedProduct = { updatedQuantity, ...rest };

更新您的產品數量並發送至API。操作完成后，您的state也可能會更新。

const previousQuantity = quantity;
const updatedProduct = { updatedQuantity: previousQuantity - 1, ...rest };
setUpdatedQuantity(previousQuantity - 1);