在MongoDB中更新一个属性并在不刷新页面的情况下更新UI

Question

我正在尝试更新一个属性比如我有一些属性、产品名称、价格、数量、供应商和描述。我将所有更新的数量和所有属性发送到 MongoDb，在这种情况下，我可以更新数据库和 UI 而无需任何刷新。

const handleDelivered = (id) => {
        
        const newQuantity = (quantity - 1);
        if (newQuantity >= 0) {
            const newService = {...serviceDetail, quantity: newQuantity}
            setServiceDetail(newService);
            const url = `https://intense-tor-77999.herokuapp.com/item/${id}`;

            fetch(url, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(newService),
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);                
                })
                .catch((error) => {
                    console.error('Error:', error);
                }) 
        }
        else{
            toast(`${productName} is sold out`);
        }
    }

但我只想更新一个属性例如只有数量

const updateQuantity = { quantity : newQuantity};

那么，如何在不将所有属性从前端发送到后端的情况下更新这个属性？

Answer 1

首先你可以声明 const [isReload, setIsReload]= useState(true);

当您在上传新数量后从数据库收到响应时，添加此

.then(response => response.json())
            .then(data => {
                console.log('Success:', data); 
                  setIsReload(!isReload);               
            });

比起你把 isReload 作为 useEffect 的依赖，你通过 id 加载数据

    useEffect(()=>{
       fetch(url)
        .then(res=>res.json())
      .then(data => setData(data))
    },[isReload ]);

试一试

在MongoDB中更新一个属性并在不刷新页面的情况下更新UI

Update one property in MongoDB and update UI without refresh the page

javascript

mongodb

express

reactjs