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 });
}
};