标签：const isFavorite 登录 AntdUi 收藏 React 05.1 res false
我的收藏模块
检查房源是否收藏 收藏房源 检查房源是否收藏
在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博客
标签：const,isFavorite,登录,AntdUi,收藏,React,05.1,res,false 来源： https://www.cnblogs.com/wmlcn/p/15083100.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。