Question

我有一个我列出的json数据：

      ListDemande: [
    {
        "type" : 'gift' ,
        "etat" : 1,
        "titreTransaction": "عدد الوحدات",
        "contenuTrans": "400",
        "dateTrans": "2019-07-31 17:47:31"
    },
    {
        "type" : 'ba' ,
        "etat" : 1,
        "titreTransaction": "عدد الوحدات",
        "contenuTrans": "500",
        "dateTrans": "2019-07-31 17:31:35"
    },
    {
        "type" : 'gift' , // problem in this item
        "etat" : 0,
        "titreTransaction": "عدد الوحدات",
        "contenuTrans": "700",
        "dateTrans": "2019-07-24 11:53:21"
    },
    {
        "type" : 'gift' ,
        "etat" : 1,
        "titreTransaction": "عدد الوحدات",
        "contenuTrans": "1000",
        "dateTrans": "2019-07-01 16:18:03"
    },
    {
        "type" : 'ba' ,
        "etat" : 0,
        "titreTransaction": "عدد الوحدات",
        "contenuTrans": "200",
        "dateTrans": "2019-06-13 17:39:24"
    },

],

在我的商品中，我必须像这样进行条件重整才能显示gift或ba的图标，它取决于“类型”，还需要一个条件来指示该商品是否有效或而不是带有1或0的“ etat”，这是我的方法：

const ic1 = <IconAD name="gift" size={hp('4%')}
              color= {
                demande.etat === 0 ?
                Colors.red :
                Colors.green
              }
              style={Styles.iconStyleBG}/>;
const ic2 = <IconAD name="tagso" size={hp('4.5%')}
            color= {
              demande.etat === 1 ?
              Colors.green :
              Colors.red
            }
            style={Styles.iconStyleBG}/>;


    let ic;
    if (demande.type === 'gift') {
        ic = ic1
    } else if (demande.type === 'ba'){
        ic = ic2
      }
const valideComp = <View style={Styles.container}>
    {ic}

    <View style={Styles.scoreContainer}>
      <View style={Styles.scoreValueContainer}>

        <Text style={[Styles.scoreUnityText, Styles.colorV]}>درهم</Text>
        <Text style={[Styles.scoreValueText, Styles.colorV]}>
        {demande.contenuTrans}
        </Text>
        <IconFA5 name="check" size={hp('2.6%')} color= {Colors.green} style={Styles.vIcStyle}/>


      </View>
    </View>
      <View style={Styles.dateTimeContainer}>
        <View style={Styles.dateContainer}>
          <Text style={Styles.dateText}>{date}</Text>
        </View>
        <View style={Styles.TimeContainer}>
          <Text style={Styles.TimeText}>{time}</Text>
        </View>
      </View>
    </View>;

const invalideComp = <View style={Styles.container}>
    {ic}
    <IconAD name="tagso" size={hp('4.5%')} color= {Colors.red} style={Styles.iconStyleBG}/>

    <View style={Styles.scoreContainer}>
      <View style={Styles.scoreValueContainer}>

        <Text style={[Styles.scoreUnityText, Styles.colorNv]}>درهم</Text>
        <Text style={[Styles.scoreValueText, Styles.colorNv]}>
        {demande.contenuTrans}
        </Text>
        <IconMCI name="timer-sand-full" size={hp('2.7%')} color= {Colors.red} style={Styles.vIcStyle}/>


      </View>
    </View>
      <View style={Styles.dateTimeContainer}>
        <View style={Styles.dateContainer}>
          <Text style={Styles.dateText}>{date}</Text>
        </View>
        <View style={Styles.TimeContainer}>
          <Text style={Styles.TimeText}>{time}</Text>
          <Text style={Styles.TimeText}>{demande.type}</Text>
          <Text style={Styles.TimeText}>{demande.etat}</Text>
        </View>
      </View>
    </View>;


    let comp;
    if (demande.etat === 1) {
        comp = valideComp
    } else if (demande.etat === 0){
        comp = invalideComp
      }

也许这不是最佳方法，因为我是一个初学者，但从逻辑上讲它必须可行。

问题在于它适用于所有商品，但不适用于该商品：

如果"type" : "700"和"etat" : 0,

，它会同时显示两个图标

Answer 1

尽管您先前声明了<IconAD name="tagso" />常量，但您似乎在invalideComp下声明了另外的ic。删除它应该可以解决问题。

此外，如果只有两个条件要管理，那么如果您使用else而不是else if来表示第三个条件，则代码将更加简洁。

let comp;
if (demande.etat === 1) {
  comp = valideComp
// } else if (demande.etat === 0){
} else {
  comp = invalideComp
}

或

let comp;
if (demande.etat === 1) {
  comp = valideComp
} else if (demande.etat === 0) {
  comp = invalideComp
} else {
  comp = <View />
}

双重条件渲染不起作用

1 个答案: