时间戳

首页 > 解决方案 > 卡片计数功能反应原生

react-native - 卡片计数功能反应原生

问题描述

我正在尝试制作一个电子商务应用程序，并且当用户将商品添加到购物车时，只有购​​物车图标才能工作的所有内容都不会更新。

这是我调用组件的主页：

<Header headerTitle={this.state.wineD.name} lefticonType={'back'} navigation={this.props.navigation} />

这是组件代码：

componentDidMount(){
  //API code here and updating response count in state.
  if(response.data.success){
    this.setState({
        cartItems: (response.data.data.cart.items != '' && (response.data.data.cart.items).length > 0)?
        (response.data.data.cart.items).length : 0
    })
    this.props.changeLoaderStatus();
   }
}

<FlatHeader
        leftIcon={<Icon name={leftIcon} size={20} color="#FFF" />}
        leftIconHandler={() => {
          (this.props.lefticonType == 'bars' ?
          this.props.navigation.dispatch(DrawerActions.openDrawer())
          : goBack())
        }}
        centerContent={
                    <View style={{width: width*0.7,alignItems:'center'}}>
                        <Text numberOfLines={1} style={{ color: '#FFF',fontSize:22,fontWeight:'bold' }}>{this.props.headerTitle}</Text>
                    </View>
                }
        rightIcon={<Group><Icon name="shopping-cart" size={20} color="#FFF" />
        <View style={{width:16,height:16,borderRadius:8,backgroundColor:'red',justifyContent:'center',
        alignItems:'center',marginBottom:14}}>
        <Text style={{fontSize:10,color:'#fff',fontWeight:'bold'}}>{this.state.cartItems}</Text></View></Group>}
        rightIconHandler={() => this.props.navigation.navigate('Cart')}
        large
        style={{ backgroundColor: '#d7b655' }}
      />

这是从其他组件更新购物车的屏幕

在此处输入图像描述

任何人有解决方案，请在这里分享。

标签： react-nativecart

解决方案

如果我正确理解了您的问题，您可能需要以this.setState这种方式进行修改：

componentDidMount(){
  //API code here and updating response count in state.
  if(response.data.success){
    this.setState({
        cartItems: (response.data.data.cart.items != '' && (response.data.data.cart.items).length > 0)?
        (response.data.data.cart.items).length : 0
    },()=>{
this.props.changeLoaderStatus(); }) } }

试试这个，让我知道它是否适合你。

推荐阅读