我有一个可以获取 30 张图片的应用,当您将鼠标悬停在图片上时,您可以通过点击出现的心形来“收藏”该图片。当心脏被点击时,这个函数就会运行。
//toggle favorited on and off
const toggleFavorite = (id) => {
const newArr = allPhotos.map((photo) => {
if (photo.id === id) {
return {
...photo,
liked_by_user: !photo.liked_by_user,
};
}
return photo;
});
setAllPhotos(newArr);
};
当你点击这颗心时,上面的函数会获取照片并将“liked_by_user”属性设置为与任何值相反的值(真或假),如果为真则心形图标被填充,如果为假则心脏只是勾勒出来的。
我想将“liked_by_user”属性存储在本地存储中,这样如果页面刷新,图像“liked_by_user”仍将设置为true,心形图标仍将被归档。
我以前从未实现过 localStorage。
我认为我在正确的轨道上,当点击心形图标时,本地存储确实被创建,但它的值是“未定义”
注意 - 我所有的图像都存储在一个名为 AllPhotos 的数组中
//toggle favorited on and off
const toggleFavorite = (id) => {
const newArr = allPhotos.map((photo) => {
if (photo.id === id) {
return {
...photo,
liked_by_user: !photo.liked_by_user,
};
}
return photo;
});
setAllPhotos(newArr);
*****issue below****
let ImageToStore = newArr.filter((image) => image.id === id);
localStorage.setItem("image", JSON.stringify(ImageToStore.liked_by_user));
};
任何帮助将不胜感激!
答案 0 :(得分:1)
.filter() 返回一个数组,因此“liked_by_user”属性未定义。
试试这个:
let ImageToStore = newArr.filter((image) => image.id === id)[0];
localStorage.setItem("image", JSON.stringify(ImageToStore.liked_by_user))
在这里,您将提取数组的第一个元素,该元素是具有 like_by_user 属性的对象。
注意:如果数组为空,它会抛出一个错误,所以你可能需要为此添加一个检查。