reactjs - 如果 React Native 中没有数据，如何检查平面列表

Question

我正在尝试检查数据是否没有出现在服务器的平面列表中

这是我的平面列表，现在我想对其进行检查...

<FlatList
          data={this.state.fetchJobs}
          keyExtractor={(a, b) => b.toString()}
          renderItem={({ item }) => (
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={() =>
                this.props.navigation.navigate("DetailJobScreen", {
                  job_id: item.job_id
                })
              }
            >
              <CompleteJobLayout
                Completejobname={`${entities.decode(item.employer_name)}`}
                featuredCompleteJobColor={`${entities.decode(
                  item.featured_color
                )}`}
                imageUriCompleteJobfeatured={{ uri: `${item.featured_url}` }}
                Completejobtitle={`${entities.decode(item.project_title)}`}
                jobflagimageUri={{ uri: `${item.location.flag}` }}
                Completejoblevel={`${entities.decode(
                  item.project_level.level_title
                )}`}
                Completejobcountry={`${entities.decode(
                  item.location._country
                )}`}
                Completejobrate={`${entities.decode(item.project_cost)}`}
                fav_job_user_id={item.job_id}
                Fav_Color={`${entities.decode(item.favorit)}`}
                Completejobduration={`${entities.decode(
                  item.project_duration
                )}`}
              />
            </TouchableOpacity>
          )}
        />

这是数据传入时的响应...

[
  {
    "favorit": "",
    "featured_url": "",
    "featured_color": "",
    "location": {
      "_country": "India",
      "flag": "https://amentotech.com/projects/api_workreap/wp-content/uploads/2019/03/img-03-2.png"
    },
    "job_id": 178,
    "job_link": "https://amentotech.com/projects/api_workreap/project/forest-technology-professor/",
    "_is_verified": "yes",
    "project_level": {
      "level_title": "Medium Level",
      "level_sign": 0
    },
    "project_type": "Fixed",
    "project_duration": "01 to 03 months",
    "project_cost": "$6,399.00",
    "attanchents": [
      {
        "document_name": "WordPress customization",
        "file_size": "85.84 KB",
        "filetype": {
          "ext": "pdf",
          "type": "application/pdf"
        },
        "extension": "",
        "url": "https://amentotech.com/projects/worktern/wp-content/uploads/2019/03/WordPress-customization.pdf"
      },
      {
        "document_name": "How to run mysql command in database",
        "file_size": "16.06 KB",
        "filetype": {
          "ext": "docx",
          "type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        },
        "extension": "",
        "url": "https://amentotech.com/projects/worktern/wp-content/uploads/2019/03/How-to-run-mysql-command-in-database.docx"
      }
    ],
    "skills": [
      {
        "skill_link": "https://amentotech.com/projects/api_workreap/skill/c/",
        "skill_name": "C++"
      },
      {
        "skill_link": "https://amentotech.com/projects/api_workreap/skill/graphic-design/",
        "skill_name": "Graphic Design"
      },
      {
        "skill_link": "https://amentotech.com/projects/api_workreap/skill/html-5/",
        "skill_name": "HTML 5"
      },
      {
        "skill_link": "https://amentotech.com/projects/api_workreap/skill/seo/",
        "skill_name": "SEO"
      }
    ],
    "employer_name": "Steven Ford",
    "project_title": "Forest Technology Professor",
    "project_content": "Some Data"
  }]

这是没有可用数据时的响应...

[
  {
    "type": "error",
    "message": "Some error occur, please try again later"
  }
]

这是我获取数据的功能...

 fetchCompleteJobData = async () => {
    const { params } = this.props.navigation.state;
    const response = await fetch(
      "https:...//listing/get_jobs?listing_type=company&company_id=" +
      params.employ_id
    );
    const json = await response.json();
    this.setState({ fetchJobs: json, isLoading: false });
    console.log('These are my jobs'+JSON.stringify(fetchJobs))
  };

请告诉我如何检查是否没有数据显示没有数据消息

标签： reactjsreact-native

Answer 1

您可以检查响应是否属于类型error并在组件的状态中设置一个空数组。

fetchCompleteJobData = async () => {
  //... your code to fetch data

  const json = await response.json();
  if(Array.isArray(json) && json[0] && json[0].type && json[0].type === 'error') {
    this.setState({ fetchJobs:[], isLoading: false }); // empty data set 
  } else {
    this.setState({ fetchJobs: json, isLoading: false });
  }
};