在 React Native 的平面列表中进行检查

Question

我在 React Native 中使用平面列表来呈现这样的数据...

   <FlatList 
           data={this.state.fetchServices}
           keyExtractor={(a, b) => b.toString()}
           renderItem={({ item }) => (

           <ServiceLayout
           imageUri_banner={{ uri: `${item.images[0].url}` }}
           imageUri_profile={{ uri: `${item.auther_image}` }}
           service_name={`${entities.decode(item.auther_title)}`}
           service_title={`${entities.decode(item.title)}`}
           service_price={`${entities.decode(item.price)}`}
           service_rating={`${entities.decode(item.total_rating)}`}
           />
           )}

           numColumns={2}
         keyExtractor={(item, index) => index}
         />

在上面的代码中，我必须对此进行检查..

imageUri_banner={{ uri: `${item.images[0].url}` }}

但我无法检查里面的数据ServiceLayout请建议一种方法来检查平面列表

这是我获取数据的函数..

fetchLatestPostedServices = async () => {
    const Pid = await AsyncStorage.getItem("projectProfileId");
    const response = await fetch(
      CONSTANT.BaseUrl + "services/get_services?listing_type=latest"
    );
    const json = await response.json();
    console.log("This is json");
    if(Array.isArray(json) && json[0] && json[0].type && json[0].type === 'error') {
      this.setState({ fetchServices:[] }); // empty data set 
    } else  {
      this.setState({ fetchServices: json });
    }
  };

这是我从服务器得到的响应...

[
  {
    "favorit": "",
    "service_id": 1159,
    "service_url": "http://amentotech.com/projects/api_workreap/service/i-will-provide-best-logo-development/",
    "auther_title": "Christian Edwards",
    "auther_image": "http://amentotech.com/projects/api_workreap/wp-content/uploads/2019/09/1084_IMG_20190907_084835-1-100x100.jpg",
    "auther_verified": "yes",
    "auther_date": "March 26, 2019",
    "auther_slug": "christian-edwards",
    "service_views": 1,
    "featured_text": "",
    "categories": [
      {
        "category_name": "Music &amp; Audio"
      },
      {
        "category_name": "Programming &amp; Tech"
      }
    ],
    "title": "I will provide Best Logo Development",
    "content": "I will provide Best Logo Development",
    "rating": 0,
    "feedback": 0,
    "total_rating": "0.0",
    "price": "&#36;65.00",
    "delivery_time": "2 Days",
    "response_time": "6 Hours",
    "queu": 0,
    "soled": 0,
    "images": [
      {
        "url": "http://amentotech.com/projects/api_workreap/wp-content/uploads/2019/08/Screenshot_20190826-215246_Alfa-355x352.jpg"
      },
      {
        "url": "http://amentotech.com/projects/api_workreap/wp-content/uploads/2019/08/IMG-20190826-WA0002-2-355x352.jpg"
      }
    ],
    "reviews": [

    ]
  },
  {
    "favorit": "",
    "service_id": 902,
    "service_url": "http://amentotech.com/projects/api_workreap/service/i-will-create-fix-customize-your-wordpress-website-20/",
    "auther_title": "Theresa Morris",
    "auther_image": "http://amentotech.com/projects/api_workreap/wp-content/uploads/2019/03/3-1-100x100.jpg",
    "auther_verified": "yes",
    "auther_date": "March 26, 2019",
    "auther_slug": "theresa-morris",
    "service_views": 58,
    "featured_text": "Featured",
    "categories": [
      {
        "category_name": "Digital Marketing"
      },
      {
        "category_name": "Fun &amp; Lifestyle"
      },
      {
        "category_name": "Programming &amp; Tech"
      }
    ],
    "title": "I Will Make Professional Excel And Google Sheets",
    "content": "<p>Excepteur sint occaecat cupidatat non proident, saeunt in culpa qui officia deserunt mollit anim id est laborum. Seden utem perspiciatis undesieu.</p>\r\n<p>Accusantium doque laudantium, totam rem aiam eaqueiu ipsa quae ab illoion inventoren veritatisetm quasitea architecto beataea dictaed quia couuntur magni dolores eos quistm ratione vtatem seque nesnt. Neque porro quamest quioremas ipsum quiatem dolor situe sitem amet conctetur adipisci velit sedate quianon.</p>\r\n<h3>Why Should You Hire Me?</h3>\r\n<p>Laborum sed ut perspiciatis unde omnis iste natus error sitems voluptatem accusantium doloremque laudantium, totam rem aiam eaque ipsa quae ab illo inventore veritatis etna quasi architecto beatae vitae dictation explicabo. nemo enim ipsam fugit.</p>\r\n<ul>\r\n  <li><span>Nemo enim ipsam voluptatem quia</span></li>\r\n  <li><span>Adipisci velit, sed quia non numquam eius modi tempora</span></li>\r\n  <li><span>Eaque ipsa quae ab illo inventore veritatis et quasi architecto</span></li>\r\n  <li><span>Qui dolorem ipsum quia dolor sit amet</span></li>\r\n</ul>\r\n<p>Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nequei porrom quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velitn, sed quia nonae numquam eius modi tempora incidunt labore omnis iste natus error sites voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quaem ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia conseq aeuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>",
    "rating": 0,
    "feedback": 0,
    "total_rating": "0.0",
    "price": "&#36;20.00",
    "delivery_time": "3 Days",
    "response_time": "3 Hours",
    "queu": 1,
    "soled": 0,
    "images": [
      {
        "url": "http://amentotech.com/projects/api_workreap/wp-content/uploads/2019/06/19-355x352.jpg"
      },
      {
        "url": "http://amentotech.com/projects/api_workreap/wp-content/uploads/2019/06/015-355x352.jpg"
      },
      {
        "url": "http://amentotech.com/projects/api_workreap/wp-content/uploads/2019/06/16-355x352.jpg"
      },
      {
        "url": "http://amentotech.com/projects/api_workreap/wp-content/uploads/2019/06/06-355x352.jpg"
      }
    ],
    "reviews": [

    ]
  }]

Answer 1

当您使用 flatList 时，您可以 return renderItem 中的一个函数：

       renderItem={({ item }) => {

          //All your checks

           return(
           <ServiceLayout
           imageUri_banner={{ uri: `${item.images[0].url}` }}
           imageUri_profile={{ uri: `${item.auther_image}` }}
           service_name={`${entities.decode(item.auther_title)}`}
           service_title={`${entities.decode(item.title)}`}
           service_price={`${entities.decode(item.price)}`}
           service_rating={`${entities.decode(item.total_rating)}`}
           />
           )}
           numColumns={2}
           keyExtractor={(item, index) => index}
           />)
}

编辑。

您还可以进行内联检查，查看图像是否为空，您可以这样做：

imageUri_banner={{ uri: `${item.images[0].url?item.images[0].url:null}` }}

在 React Native 的平面列表中进行检查

Make checks inside flat list in react native

reactjs

react-native

react-native-flatlist