我在试着组装一个简单的计数器来改变物品的数量.使用挂钩管理其状态,我可以正确更新屏幕上的值.但是,当i控制台日志(log)时,状态保持的值总是比屏幕上的值小一个.

例如:

如果起始值为1,按下加号按钮后,屏幕上的值变为2,但在控制台中,状态值仍为1.

Setup of Hooks and functions controlling the count:

//Set Quantity
const [quantity, setQuantity] = useState(1);

//Set Item price
const [itemPrice, setItemPrice] = useState(itemOptions[0].price)

//Counter Control
 const [disableMinus, setDisableMinus] = useState(true);

const addQuantity = () => {
    if (quantity === 1) {
        setQuantity(quantity + 1);
        setDisableMinus(false);
        console.log(quantity)
    } else {
        if (quantity > 1){
            setQuantity(quantity + 1);
            setDisableMinus(false);
            console.log(quantity)
        }
    }
}
const minusQuantity = () => {
   if (quantity === 1){
       setDisableMinus(true);
   } else {
       if (quantity > 1) {
           setQuantity(quantity - 1);
           setDisableMinus(false);
           console.log(quantity)
       }
   }
} 

return (
    <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: "center", paddingVertical: 20}}>

    <TouchableOpacity disabled={disableMinus} onPress={() => minusQuantity()}>

        <AntDesign style={{color: '#37BD6B'}} name="minuscircle" size={30}/>

    </TouchableOpacity>

    <Text style={{paddingHorizontal: 10, fontWeight: '700', fontSize: 30}}>{quantity}</Text>

    <TouchableOpacity onPress={() => addQuantity()}>

        <AntDesign style={{color: '#37BD6B'}} name="pluscircle" size={30}/>

    </TouchableOpacity>
)

提前感谢

推荐答案

useState中的setter是异步的.

你可以这样记录

useEffect(()=>{
   console.log(quantity)
}, [quantity]

这意味着:当依赖项[quantity]更改时,执行作为第一个参数传递的function

为了避免过时的闭包(在两次快速单击或rand randers时发生),您应该使用setters并向其传递函数,而不是"当前"值:

setQuantity(prevQuantity => prevQuantity + 1);

Javascript相关问答推荐

使用redux-toolet DelivercThunks刷新访问令牌

有Angular 的material .未应用收件箱中的价值变化

当在select中 Select 选项时,我必须禁用不匹配的 Select

我应该在redux reducer中调用其他reducer函数吗?

无法在nextjs应用程序中通过id从mongoDB删除'

React 17与React 18中的不同setState行为

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

为什么ngModel不能在最后一个版本的Angular 17上工作?'

D3 Scale在v6中工作,但在v7中不工作

在带有背景图像和圆形的div中添加长方体阴影时的重影线

还原器未正确更新状态

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

为什么useState触发具有相同值的呈现

如何将多维数组插入到另一个多维数组中?

TypeError:无法分解';React2.useContext(...)';的属性';basename';,因为它为空

从页面到应用程序(NextJS):REST.STATUS不是一个函数

当我try 将值更改为True时,按钮不会锁定

如果我的列有条件,我如何呈现图标?

在高位图中显示每个y轴系列的多个值

脚本语法错误只是一个字符串,而不是一个对象?