React Native：计数器未显示正确的更新状态

Question

我正在尝试组装一个简单的计数器来更改项目的数量。使用 Hooks 来管理它的状态，我正确地更新了屏幕上的值。但是，当我控制台日志时状态保持的值总是比屏幕上的值小一。

例如：

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

设置挂钩和控制计数的函数：

//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>

)

提前致谢

Answer 1

来自 useState 的设置器是异步的。

你可以这样记录

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

这意味着：当依赖[quantity]改变时，执行作为第一个参数

传递的function

为避免过时的关闭（发生在快速点击或随机播放 2 次时），您应该使用 setter 并向其传递函数而不是“当前”值：

setQuantity(prevQuantity => prevQuantity + 1);

Answer 2

这是另一种设置方式：


const addQuantity = () => {
  ...
      setQuantity(oldQuantity => {
        const newQuantity = oldQuantity + 1
        console.log(newQuantity) // console.log moved here. Also could be console.log("Incremented quantity to:", quantity)
        return newQantity
      });
  ...
}

此方法允许您在设置新数量值之前记录它。在这种方法中，您可以根据具体情况执行特定操作（在本例中为 console.log）。

另一方面，@Poptocrack 的回答中的 useEffect 方法将跟踪对 quantity 状态的所有更改。它的代码少得多，根据您的需要可能更理想。

希望您能从这两种方法中找到最适合您需求的方法。

React Native：计数器未显示正确的更新状态

React Native: Counter not showing correct updated state

javascript

typescript

react-native