如何使用React Hooks正确更新状态 解决首次更新取值异常问题

这个异常是React状态异步更新+闭包缓存共同导致的：
React的setState不会同步修改当前渲染帧里的状态变量，你在handleCart函数里读取的subTotal和itemQty，永远是当前函数创建时闭包缓存的旧值。首次点击时两个值都是初始的0，计算后更新的值要等组件重渲染才会生效，等你第二次点击时，闭包里才会拿到第一次更新后的值，就出现了“首次操作无效、第二次才更新”的现象。

做增量状态更新时，不要直接依赖闭包缓存的状态值，给setState传入函数式更新参数，该函数的入参是React保证的、更新队列中最新的上一轮状态值，计算结果不会受闭包旧值影响。
修复后的完整代码如下：

const { product } = props;
const [subTotal, setSubTotal] = useState(0);
const [itemQty, setItemQty] = useState(0);

const handleCart = () => {
    const price = Number(product.price);
    // 函数式更新，始终基于最新状态计算
    setSubTotal(prevSubTotal => prevSubTotal + price);
    setItemQty(prevQty => prevQty + 1);
}

return (
    <div>
        <Image
            src={product.url}
            alt={product.title}
            className="product__image"
        />
        <div className="product__title">{product.title}</div>
        <div className="product__price">${product.price}</div>
        <Button
            className="product__qty-btn-p btn btn-primary"
            type="button"
            data-id="increase"
            onClick={handleCart}
            id="basic-addon2"
        >
            Add
        </Button>
    </div>
)

• 原代码里onClick={() => handleCart()}属于多余的匿名函数包裹，直接传入onClick={handleCart}即可，能减少不必要的子组件重渲染
• 原代码中声明的const id = product.itemId没有被实际使用，可以直接删除减少冗余
• 更推荐不要单独维护subTotal状态，直接通过itemQty和商品单价派生计算总价，从根源上避免两个状态不同步的问题：

// 删掉subTotal的state定义，直接在渲染时计算
const subTotal = itemQty * Number(product.price);

后续如果增加减少商品数量、删除商品的逻辑，只需要维护itemQty一个状态即可，不用重复计算总价，不会出现数量变了总价没更新的bug。

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