如何在更改数据库后立即渲染组件

how to immediately render component after making changes in database

我创建了一个页面,用户将在其中看到一些产品。每个产品都有一个交付按钮。如果用户点击交付按钮,产品数量将减少 1。然后它会立即渲染组件并显示新数量

我正在使用状态来设置产品。假设有一个数量和结构化数量

const [product, setProduct] = useState({});
const { quantity} = product;

我正在设置一个将数量减一的函数

function removeOne() {
        let newQuantity = quantity - 1;
        const newProduct = { ...product, quantity: newQuantity }
        //copy all previous data if exist in product and setup new quantity 
        setProduct(newProduct);
        fetch(`your server link/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(newProduct)
        })
    }

<button onClick={() => removeOne(id)}}>Button</button>