React使用localStorage实现收藏功能时爱心按钮刷新状态不持久化如何解决

问题原因 #

1. Works 组件的收藏状态（toggl、icon）为组件本地私有状态，页面刷新后会默认重置为未收藏，没有和 React Context 中全局管理的 basket 收藏列表做同步
2. 你当前的 Context 缺少初始化逻辑，刷新后没有从 localStorage 读取已保存的收藏数据填充全局 basket 状态

具体修改方案 #

1. 修复 Context 初始值逻辑 #

在你定义 Context 初始状态的位置，优先从 localStorage 读取已保存的收藏数据：

// 示例：你定义全局state的位置
const initialState = {
  basket: JSON.parse(localStorage.getItem('favorites')) || []
}

2. 重构 Works.jsx 逻辑，移除冗余本地状态 #

不要在 Works 组件内部维护收藏状态，直接绑定全局 basket 做判断，完整修改后的代码参考：

// 先引入全局状态
const [{ basket }] = useStateValue();

// 直接通过全局收藏列表判断当前作品是否被收藏
const isFavorited = basket.some(work => work.id === props.id);

function handleClick() {
  if (isFavorited) {
    // 调用全局删除方法，传入当前作品id
    removeFromBasket(props.id);
  } else {
    // 调用全局添加方法，传入当前作品完整信息
    addToBasket({
      id: props.id,
      img: props.img,
      category: props.category
    });
  }
}

// 渲染部分直接动态生成图标，不用存到state
return (
<div className="works-div">
  <div
    onClick={() => {
      props.viewThisProject(props.id);
    }}
  >
    <img src={props.img} alt="" className="works-img" />
    <div className="overlay">
      <RemoveRedEye titleAccess="VIEW PROJECT" />
    </div>
  </div>

  <article className="work-info">
    <div className="category-div">
      <p>{props.category}</p>
      <div></div>
    </div>

    <div className="fav-btn btns" onClick={handleClick}>
      {isFavorited ? 
        <Favorite style={{ color: "black", cursor: "pointer" }} /> : 
        <FavoriteBorderIcon style={{ color: "rgba(0, 0, 0, 0.726)", cursor: "pointer" }} />
      }
    </div>
  </article>
</div>
);

可选优化 #

可以移除 Favorites.jsx 中重复的 localStorage 写入逻辑，把写入操作放到 Context 的 reducer 里，每次修改 basket 时同步写入 localStorage，避免多组件重复处理存储逻辑。

内容的提问来源于stack exchange，提问作者Ehceyn