Reactjs 如果数据未传入,如何签入平面列表

Reactjs 如果数据未传入,如何签入平面列表,reactjs,react-native,Reactjs,React Native,我正在尝试执行检查,如果数据没有进入服务器的平面列表,在我的情况下,如果数据正在进入,它工作正常,但当没有数据时,它显示错误。这是我的代码 这是我的平面列表现在我想对它进行检查 <FlatList data={this.state.fetchJobs} keyExtractor={(a, b) => b.toString()} renderItem={({ item }) => ( <To

我正在尝试执行检查,如果数据没有进入服务器的平面列表,在我的情况下,如果数据正在进入,它工作正常,但当没有数据时,它显示错误。这是我的代码

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

<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>
          )}
        />
这是当没有可用数据时的响应

[
  {
    "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))
  };
请告诉我如何检查是否没有数据显示无数据消息

{
{
this.state.fetchJobs.length ? (
    <FlatList
        ...
    />
) : (
    <View>
        ...
    </View>
)
}
this.state.fetchJobs.length( ) : ( ... ) }
您可以检查响应类型是否为
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 });
  }
};

谢谢,它起作用了。。。请告诉我,如果我想显示“无可用数据”的消息,我如何在FlatList
FlatList
中执行该操作,以便在列表为空时传递占位符组件。您可以使用此道具设置包含
文本的组件,以显示错误消息。
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 });
  }
};