卡计数功能会自动响应

Question

我正在尝试制作一个电子商务应用程序，并且当用户向购物车中添加商品时，仅用于购物车图标的所有功能都不会更新。

这是我正在呼叫组件的主页：

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

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

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

Answer 1

如果我正确理解了您的问题，则可能需要以这种方式修改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(); }) } }

尝试一下，让我知道它是否适合您。