useState 不将状态更新为仅 0 和 1

Question

我有代码可以在按 1 按下 + 时更新数量。但是当我 console.log 变量时，它只会从 0 更新到 1。如果设置了任何其他初始值，它不会更新它。谁能帮帮忙。

import React, { useState } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'

const SubscriptionQuantity = () => {
    const [quantity, setQuantity] = useState(10) //Whatever i set it only sets it to 1. If i set it to 0 then its 0.

    return (
        <View>
            <View style={styles.quantityView}>
                <TouchableOpacity
                    style={quantity > 1 ? styles.quantityCircle : styles.quantityCircleDisabled}
                    onPress={quantity > 1 ? setQuantity(quantity - 1) : null}
                    disabled={quantity > 1 ? false : true}
                >
                    <Text style={styles.buttonText}>-</Text>
                </TouchableOpacity>
                <Image source={require('../../assets/images/Render_New_Label04_Revised.png')}
                    resizeMode="contain"
                    height={null}
                    width={null}
                />
                <TouchableOpacity
                    style={styles.quantityCircle}
                    onPress={() => {
                        let temp = quantity
                        temp += 1
                        console.log(temp)
                        setQuantity(temp)
                    }}
                >
                    <Text style={styles.buttonText}>+</Text>
                </TouchableOpacity>
            </View>

            <View style={styles.quantityView}>
            //Here quantity is shown as 0 or 1. not increasing at all.
                <Text>Qty.= {quantity} </Text>
                <Text>1 Ltr = ₹ <Text>70.00</Text></Text>
            </View>
        </View>
    )
}

export default SubscriptionQuantity

Answer 1

你能试试下面的例子来增加数量吗？

 setQuantity(prevQuantity => prevQuantity + 1);

Answer 2

请试试这个。

import React, { useState } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'

const SubscriptionQuantity = () => {
    const [quantity, setQuantity] = useState(10) //Whatever i set it only sets it to 1. If i set it to 0 then its 0.
    const onMinus = () => setQuantity(prev => (prev > 1 ? (prev - 1) : prev));
    const onPlus = () => setQuantity(prev => prev + 1);

    return (
        <View>
            <View style={styles.quantityView}>
                <TouchableOpacity
                    style={quantity > 1 ? styles.quantityCircle : styles.quantityCircleDisabled}
                    onPress={onMinus}
                    disabled={quantity > 1 ? false : true}
                >
                    <Text style={styles.buttonText}>-</Text>
                </TouchableOpacity>
                <Image source={require('../../assets/images/Render_New_Label04_Revised.png')}
                    resizeMode="contain"
                    height={null}
                    width={null}
                />
                <TouchableOpacity
                    style={styles.quantityCircle}
                    onPress={onPlus}
                >
                    <Text style={styles.buttonText}>+</Text>
                </TouchableOpacity>
            </View>

            <View style={styles.quantityView}>
            //Here quantity is shown as 0 or 1. not increasing at all.
                <Text>Qty.= {quantity} </Text>
                <Text>1 Ltr = ₹ <Text>70.00</Text></Text>
            </View>
        </View>
    )
}

export default SubscriptionQuantity

Answer 3

我认为最好解释一下@bymax 提出的解决方案为何有效。

之前的代码（无效）：

return (
//...
  <TouchableOpacity
      style={quantity > 1 ? styles.quantityCircle : styles.quantityCircleDisabled}
      onPress={quantity > 1 ? setQuantity(quantity - 1) : null}
      disabled={quantity > 1 ? false : true}
  >
      <Text style={styles.buttonText}>-</Text>
  </TouchableOpacity>
)

问题出在 onPress 道具上。您没有传递函数，而是传递了 setQuantity(quantity -1) 调用的结果或 null。发生的事情是每个渲染器都在调用该函数并将结果作为 TouchableOpacity 组件的 onPress 道具传递。

相反，加号按钮更好：

return(
  //...
  <TouchableOpacity
     style={styles.quantityCircle}
     onPress={() => {
        let temp = quantity
        temp += 1
        console.log(temp)
        setQuantity(temp)
      }}
  >
      <Text style={styles.buttonText}>+</Text>
  </TouchableOpacity>
)

即使这不是一个干净的解决方案，这段代码也能正常工作，因为您将一个函数传递给了 TouchableOpacity 组件的 onPress 属性。

@bymax 提出的解决方案更简洁易读，所以我建议您使用相同的方法。

useState 不将状态更新为仅 0 和 1

useState not updating state as only 0 and 1

reactjs

react-hooks

use-state