双条件渲染不起作用

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 的图标，这取决于“类型”以及指示该项目是否有效与“etat”的条件" 取 1 或 0，这是我的方法：

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

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

另外，如果只有两个条件需要管理，如果您使用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 />
}