无法将 UI 中的值减一 node.js mongodb，做出反应

Question

我正在尝试更新 UI 中的值。当我单击 update 时，我有一个按钮将在数据库中减少一个并显示在 UI 的 quantity 部分中。当我点击按钮时，它会减一，但再次点击它不会减少。

UI 图片 enter image description here

//getting the data in the useEffectm updating quantity in handleUpdate

const { bookId } = useParams();
    const [book, setBook] = useState({});
    const [reload, setReload] = useState(true);
    console.log(reload);

    useEffect(() => {
        const url = `url/book/${bookId}`;
        fetch(url)
            .then(res => res.json())
            .then(data => setBook(data))
    }, [reload])

    const quantity = parseInt(book.quantity) - 1;
    console.log(quantity);


    const handleUpdate = () => {
        const url = `url/books/${bookId}`
        fetch(url, {
            method: "PUT",
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify({ quantity })
        })
            .then(res => res.json())
            .then(data => {
                console.log(data)
                setReload(!reload)
                alert("user updated")
            })
    }

//API for updating the value.
 // update quantity 
        app.put('/books/:id', async (req, res) => {
            const id = req.params.id;
            console.log(req.body)
            const quantity = req.body.quantity
            console.log(quantity)
            const filter = { _id: ObjectId(id) };
            const options = { upsert: true };
            const updatedQuantity = {
                $set: { ...quantity - 1}
            }
            const result = await bookCollections.updateOne(filter, updatedQuantity, options);
            res.send(result);
        });

//displaying the updated value
<li className="m-1">
<Link className="inline-flex text-center text-gray-100 py-1 px-3 rounded-full bg-blue-500 hover:bg-blue-600 transition duration-150 ease-in-out" to="#0">Quantity: {quantity}</Link>
</li>

//calling the function in button.
<button onClick={handleUpdate} className="btn btn-outline text-white">Delevered</button>

Answer 1

将值减一时，尝试将其存储在状态中。并使用数据库中的当前值作为状态的默认值。例如，

const [newQuantity, setNewQuantity] = useState(product.quantity);

获取后，像这样设置新值：

获取(url, { 方法：'PUT'， headers：{ 'content-type': 'application/json' }, body：JSON.stringify（更新数量）

    })
        .then(res => res.json())
        .then(data => {
            setNewQuantity(updatedQuantity);
        })
}

Answer 2

你快完成了。在服务器端，只需解构数量，因为它已经更新。它应该看起来像，

 $set: {...quantity}

并在 onClick 函数中在定义函数和调用函数时在按钮内传递 id

onClick={()=> handleUpdate(bookId)}

它应该有效:)

无法将 UI 中的值减一 node.js mongodb，做出反应

cann't decrease a value by one in the UI with node.js mongodb, react

javascript

mongodb

node.js

reactjs