Question

我在我的本机应用程序上遇到一个奇怪的问题，我有一个计数器按钮，例如使用redux增加和减少产品数量，但是问题是当我按下按钮时，商店价值改变了，但是Text组件（视图）不会自动更改，直到我在按钮外单击（这是个奇怪的问题）。

我在onPress和TouchableOpacity onPress上尝试过Button组件，但是仍然存在相同的问题。

<TouchableOpacity onPress={()=>{this.handleDecQuantity(item)}}>
 <Icon
  family="AntDesign"
  size={16}
  name="minus"
  color="#2B4D8E"
  style={styles.btn}
 />
</TouchableOpacity>
...
<Text size={16}>{item.quantity}</Text>
...
<Button onlyIcon icon="plus" radius={3} shadowless iconFamily="AntDesign" iconSize={20} color="tarnsparent" iconColor="#2B4D8E" style={styles.btn}  onPress={()=>{this.handleIncQuantity(item)}}>+</Button>

我希望问题解决了，仅当我在按钮或TouchableOpacity之外单击时，计数器才会更改

Answer 1

在redux存储中，它返回子项的props，而不是状态变量。并且道具绝对不能在子组件中更改。有关更多详细信息，如果您要更新UI，则可以看到此article。您可以执行以下操作：

 constructor(props){
     super(props)
     this.state ={
         quantity:0
       }
   }
 //for react-native version >0.6

 getderivedstatefromprops(nextProps,state){

    return {
       quantity:nextProps.item.quantity
     }
}

//for react-native < 0.6
componentwillreceiveprops(nextProps){
    let copyQuantity = nextProps.item.quantity
    this.setState({quantity:copyQuantity})
 }

按下“响应本机”按钮无法正常工作

1 个答案: