如何在react本机中检查项目为零的平面列表
如何在react本机中检查项目为零的平面列表
提问于 2019-07-23 15:40:22
我使用平面列表来呈现我的项目，但当项目来自服务器时，我遇到了一个问题，平面列表工作正常，但当服务器的响应中没有项目时，列表生成错误，我如何处理空列表?这是我的代码。
fetchFreelancerData = async () => {
const Pid = await AsyncStorage.getItem("projectUid");
console.log(Pid);
const response = await fetch(
BaseUrl + "listing/get_freelancers?listing_type=favorite&user_id=" + Pid
);
const json = await response.json();
// {json[0].type != "error" ?
this.setState({ fetchFreelancer: json });
// }
};这是我获取数据的函数，这是我呈现数据的平面列表
<FlatList
style={{ paddingBottom: 5, paddingTop: 10 }}
data={this.state.fetchFreelancer}
keyExtractor={(y, z) => z.toString()}
renderItem={({ item }) =>
(
<TouchableOpacity
activeOpacity={0.9}
onPress={() =>
this.props.navigation.navigate("DetailFreelancerScreen", {
profile_id: item.profile_id,
user_id: item.user_id
})
}>
<FreelancerCategory
imageUrifreelancer={{ uri: `${item.profile_img}` }}
imageUrifeatured={{ uri: `${item.badge.badget_url}` }}
featuredColor={`${entities.decode(item.badge.badget_color)}`}
flagimageUri={{ uri: `${item.location.flag}` }}
freelancername={`${entities.decode(item.name)}`}
title={`${entities.decode(item._tag_line)}`}
rate={`${entities.decode(item._perhour_rate)}`}
country={`${entities.decode(item.location._country)}`}
/>
</TouchableOpacity>
)
}
/>请给我一个处理空列表的好方法
回答 3
Stack Overflow用户
发布于 2019-07-23 15:57:47
在flatList中添加ListEmptyComponent属性并渲染你想要的东西！
<FlatList
style={{ paddingBottom: 5, paddingTop: 10 }}
data={this.state.fetchFreelancer}
ListEmptyComponent={this.renderNoStateMessage()}
/>render方法。
renderNoStateMessage = () => {
<View>
<Text>You have no employers in your favorite list.</Text>
</View>
}Stack Overflow用户
发布于 2019-07-23 15:59:29
只需使用try/catch即可。
try {
const response = await fetch(
BaseUrl + "listing/get_freelancers?listing_type=favorite&user_id=" + Pid
);
const json = response.json();
this.setState({ fetchFreelancer: json });
} catch (e) {
}Stack Overflow用户
发布于 2019-07-23 16:07:34
首先，仅当您拥有有效数据时，才应设置数据的状态，如下所示
fetchFreelancerData = async () => {
const Pid = await AsyncStorage.getItem("projectUid");
console.log(Pid);
const response = await fetch(
BaseUrl + "listing/get_freelancers?listing_type=favorite&user_id=" + Pid
);
const json = await response.json();
if (json.type !== "error") {
this.setState({ fetchFreelancer: json });
}
else {
this.setState({ errorMessage: json.message,fetchFreelancer:[] });
}
}然后，您必须在FlatList中使用ListEmptyComponent
<FlatList
style={{ paddingBottom: 5, paddingTop: 10 }}
data={this.state.fetchFreelancer}
keyExtractor={(y, z) => z.toString()}
ListEmptyComponent={<Text>{this.state.errorMessage}</Text>}
renderItem={({ item }) =>
(
<TouchableOpacity
activeOpacity={0.9}
onPress={() =>
this.props.navigation.navigate("DetailFreelancerScreen", {
profile_id: item.profile_id,
user_id: item.user_id
})
}>
<FreelancerCategory
imageUrifreelancer={{ uri: `${item.profile_img}` }}
imageUrifeatured={{ uri: `${item.badge.badget_url}` }}
featuredColor={`${entities.decode(item.badge.badget_color)}`}
flagimageUri={{ uri: `${item.location.flag}` }}
freelancername={`${entities.decode(item.name)}`}
title={`${entities.decode(item._tag_line)}`}
rate={`${entities.decode(item._perhour_rate)}`}
country={`${entities.decode(item.location._country)}`}
/>
</TouchableOpacity>
)
}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57159058
复制相关文章
相似问题
腾讯云开发者
