点击handleDelivered按钮无法立即更新updatedQuantity问题求助

点击handleDelivered按钮处理函数后，无法立即对updatedQuantity产生预期效果。示例：默认quantity=10作为updatedQuantity的初始值，点击后应将其减1，控制台预期打印“updatedQuantity after delivered 9”，但实际输出：
updatedQuantity after delivered 10
updatedQuantity before delivered 9

问题代码 #

const { name, artist, img, description, price, quantity, supplier } = album;

const [updatedQuantity, setupdatedQuantity] = useState(quantity);
useEffect(() => {
    setupdatedQuantity(quantity)
}, [quantity])
console.log("updatedQuantity before delivered", updatedQuantity);


const handleDelivered = () => {
    if (updatedQuantity > 0) {
        setupdatedQuantity(updatedQuantity - 1);
        console.log("updatedQuantity after delivered", updatedQuantity);
    }
}

问题原因 #

React的useState状态更新是异步的，调用setupdatedQuantity后，updatedQuantity不会立刻同步更新。你在调用更新方法后马上打印的还是更新前的旧值，而组件重新渲染时才会拿到新的状态值，所以出现了打印值和顺序不符合预期的情况。

解决方案 #

方案1：函数式更新+监听状态变化（推荐）

如果新状态依赖旧状态，用函数式更新能确保获取到最新的旧状态；若需要在状态更新后执行操作，可通过useEffect监听状态变化：

const handleDelivered = () => {
    if (updatedQuantity > 0) {
        // 函数式更新，prev参数为当前最新的状态值
        setupdatedQuantity(prev => prev - 1);
    }
}

// 监听updatedQuantity的变化，状态更新后触发打印
useEffect(() => {
    console.log("updatedQuantity after change", updatedQuantity);
}, [updatedQuantity])

方案2：提前计算新值

如果只是需要在当前函数内使用更新后的值，可以先计算出新值，再同步更新状态和使用：

const handleDelivered = () => {
    if (updatedQuantity > 0) {
        const newQuantity = updatedQuantity - 1;
        setupdatedQuantity(newQuantity);
        console.log("updatedQuantity after delivered", newQuantity);
    }
}

内容的提问来源于stack exchange，提问作者Monzur Alam