in the shopping cart function, I break down the list of items into FlatList traversal. The problem now is that clicking on the plus and minus sign will call the background API to change the current number of shopping carts, but if you use the FlatList,state value to change the number of items, all the numbers on the page will change. If you don"t use state, you can"t see the change in the number of items on the page. The description may be a little confusing, here is the code for the screenshot.
//
itemIncrease = (i,id,item) => {
console.log(item)
iPP;
this.changeNumberData(id,i)
};
itemReduce = (i,id,item) => {
if (i <= 1) {
return;
}
i--;
// this.setState({ selNum : i },()=>{ //state
item.number = i;
this.changeNumberData(id,i)
// });
};
//FlatList,itemjson
_renderGoods(item){
return(
<FlatList data={item.goodsList}
renderItem={({ item}) => this._renderGoodsView(item)}
keyExtractor1={ this.keyExtractor1 }
extraData={this.state}
/>
)
}
//view,
_renderGoodsView(item){
return(
<View style={styles.moneyWrapRight}>
<TouchableOpacity style={ [styles.reduceNum,{ backgroundColor : item.number <= 1 ? "-sharpdcdcdc" : "-sharp20a200" }] }
onPress={() => this.itemReduce(item.number,item.id,item)}>
<Text style={[styles.numText,{color:"-sharpfff"}] }>-</Text>
</TouchableOpacity>
<View style={ styles.numTextWrap }>
<Input style={styles.selNumText}
value={ `${ item.number }`} keyboardType="numeric" maxLength={3}
onChangeText={(text) => this.setState({selNum:this._text(text)})} />
</View>
<TouchableOpacity style={ [styles.reduceNum,{backgroundColor:"-sharp20a200"}] }
onPress={() => this.itemIncrease(item.number,item.id,item)}>
<Text style={[styles.numText,{color:"-sharpfff"}] }>+</Text>
</TouchableOpacity>
</View>
)
}