如何解决如何在用户登录时保留数据,特别是收藏按钮
晚上好,我几乎完成了我的应用程序并坚持做一件事。
我可以在我的数据库中添加和删除收藏夹就好了。
问题是当我刷新页面或注销并登录显示收藏夹设置为默认值的按钮时。
我曾尝试存储到本地存储,但在我添加时它一次只能保存一项。我曾尝试使用 useEffect 钩子,但由于某些奇怪的原因,它添加了 3 个相同的项目。任何帮助将不胜感激。
这是代码。
export default function FavoriteButton({
_id,title,artist,rating,genre,description,}) {
//state for favorites
const [click,handleClick] = React.useState(false);
//add favorites
const addFavorites = () => {
const favorites = {
userId: _id,};
axios
.post("http://localhost:5000/favorite/add",favorites,authToken)
.then((response) => {
localStorage.setItem("favorite",JSON.stringify(response));
console.log(response);
});
fetchData();
handleClick(true);
};
//get records
const fetchData = async () => {
const result = await axios.get(
"http://localhost:5000/favorite/get",authToken
);
console.log(title);
};
// delete favorite
const deleteFavorite = async () => {
await axios.delete("http://localhost:5000/favorite/delete",{
data: { title: title },authToken,});
handleClick(false);
};
const classes = buttonStyles();
return (
<div>
{click === false ? (
<IconButton onClick={addFavorites} className={classes.favoriteOff}>
{" "}
<StarOutlineIcon className={classes.favoriteGrey} />{" "}
</IconButton>
) : (
<IconButton onClick={deleteFavorite} className={classes.favoriteOn}>
{" "}
<StarRateIcon className={classes.favoriteYellow} />
</IconButton>
)}
</div>
);
}
此代码显然不正确,我正在处理。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。