React+AntdUi实现《好客租房系统》房屋详情05.1

我的收藏模块

检查房源是否收藏
收藏房源
检查房源是否收藏　

在state中添加状态，isFavorite（表示是否收藏），默认值是false
state= {
// 表示房源是否收藏
isFavorite: false
}

创建方法 checkFavorite，在进入房源详情页面时调用该方法
先调用isAuth方法，来判断是否登陆
如果未登录，直接return，不再检查是否收藏
如果已登陆，从路由参数中，获取当前房屋id
使用API调用接口，查询该房源是否收藏
如果返回状态码为200，就更新isFavorite；否则，不做任何处理

async checkFavorite() {
const isLogin = isAuth()

if (!isLogin) {
// 没有登录
return
}

// 已登录
const { id } = this.props.match.params
const res = await API.get(`/user/favorites/${id}`)

const { status, body } = res.data
if (status === 200) {
// 表示请求已经成功，需要更新 isFavorite 的值
this.setState({
isFavorite: body.isFavorite
})
}
}
{/*在页面结构中，通过状态isFavorite修改收藏按钮的文字和图片内容
 底部收藏按钮 */}
<Flex className={styles.fixedBottom}>
<Flex.Item>
<img
src={
BASE_URL + (isFavorite ? '/img/star.png' : '/img/unstar.png')
}
className={styles.favoriteImg}
alt="收藏"
/>
<span className={styles.favorite}>
{isFavorite ? '已收藏' : '收藏'}
</span>
</Flex.Item>
<Flex.Item>在线咨询</Flex.Item>
<Flex.Item>
<a href="tel:400-618-4000" className={styles.telephone}>
电话预约
</a>
</Flex.Item>
</Flex>

收藏房源
给收藏按钮绑定点击事件，创建方法handleFavorite作为事件处理程序
调用isAuth方法，判断是否登陆
如果未登录，则使用Modal.alert 提示用户是否去登陆
如果点击取消，则不做任何操作
如果点击去登陆，就跳转到登陆页面，同时传递state(登陆后，再回到房源收藏页面)

const isLogin = isAuth()
const { history, location, match } = this.props

if (!isLogin) {
// 未登录
return alert('提示', '登录后才能收藏房源，是否去登录?', [
{ text: '取消' },
{
text: '去登录',
onPress: () => history.push('/login', { from: location })
}
])
}

根据isFavorite判断，当前房源是否收藏
如果未收藏，就调用添加收藏接口，添加收藏
如果收藏了，就调用删除接口，删除收藏

if (isFavorite) {
// 已收藏，应该删除收藏
const res = await API.delete(`/user/favorites/${id}`)
// console.log(res)
this.setState({
isFavorite: false
})

if (res.data.status === 200) {
// 提示用户取消收藏
Toast.info('已取消收藏', 1, null, false)
} else {
// token 超时
Toast.info('登录超时，请重新登录', 2, null, false)
}
} else {
// 未收藏，应该添加收藏
const res = await API.post(`/user/favorites/${id}`)
// console.log(res)
if (res.data.status === 200) {
// 提示用户收藏成功
Toast.info('已收藏', 1, null, false)
this.setState({
isFavorite: true
})
} else {
// token 超时
Toast.info('登录超时，请重新登录', 2, null, false)
}
}

handleFavorite = async () => {
const isLogin = isAuth()
const { history, location, match } = this.props

if (!isLogin) {
// 未登录
return alert('提示', '登录后才能收藏房源，是否去登录?', [
{ text: '取消' },
{
text: '去登录',
onPress: () => history.push('/login', { from: location })
}
])
}

// 已登录
const { isFavorite } = this.state
const { id } = match.params

if (isFavorite) {
// 已收藏，应该删除收藏
const res = await API.delete(`/user/favorites/${id}`)
// console.log(res)
this.setState({
isFavorite: false
})

if (res.data.status === 200) {
// 提示用户取消收藏
Toast.info('已取消收藏', 1, null, false)
} else {
// token 超时
Toast.info('登录超时，请重新登录', 2, null, false)
}
} else {
// 未收藏，应该添加收藏
const res = await API.post(`/user/favorites/${id}`)
// console.log(res)
if (res.data.status === 200) {
// 提示用户收藏成功
Toast.info('已收藏', 1, null, false)
this.setState({
isFavorite: true
})
} else {
// token 超时
Toast.info('登录超时，请重新登录', 2, null, false)
}
}
}

本文参考react好租客项目Day10-检测是否登&退出&axios拦截器&鉴权路由&收藏模块_码化疼-CSDN博客