嵌套地图不会在React Native中呈现jsx

Question

这是Json数据，我具有嵌套的地图功能，我想抓取手机壳和图标。但是JSX不返回任何内容。但是当我登录控制台时，它会返回图标和手机壳

  "variations": [
        {
            "id": "236",
            "variation": [
                {
                    "Phone Case": "iphone 8",
                    "icon": "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/app/icons/K2hOUtPdHMiiqyYoYv0LrvBQsrAPzcl1c5mHQkiV.png"
                }
            ],
            "quantity": "1",
            "price": "130.00",
        },
        {
            "id": "237",
            "variation": [
                {
                    "Phone Case": "iphone X",
                    "icon": "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/app/icons/K2hOUtPdHMiiqyYoYv0LrvBQsrAPzcl1c5mHQkiV.png"
                }
            ],
            "quantity": "1",
            "price": "150.00",
        }
    ],

使用嵌套地图功能进行循环。多余的手机壳和图标

_getVariations = () => {
  const { variations } = this.state;
  if(variations.length > 0){
    variations.map((vari) => {
      vari.variation.map((ivari) => {
        return Object.keys(ivari).map((key) => (
          <View style={styles.variationRow}>
             <View>
               <Text>{ivari[key]}</Text>
             </View>
             <View>
               <Image 
                 style={{ width: 25, height: 25 }}
                 source={{ uri: ivari[key] }}/>
             </View>
           </View>
        ));
      });
    });
  }
}

Answer 1

您还需要在外部地图上返回：

variations.map((vari) => {
    return (
                vari.variation.map((ivari) => {
                      return (
                          Object.keys(ivari).map((key) => {
                              return (
                                  <View style={styles.variationRow}>
                                      <View>
                                        <Text>{ivari[key]}</Text>
                                      </View>
                                      <View>
                                          <Image
                                              style={{ width: 25, height: 25 }}
                                              source={{ uri: ivari[key] }}
                                          />
                                      </View>
                                  </View>
                               );
                          });
                      );
                });
    );
});