React中LocalStorage存储数组覆盖键值对无法追加元素问题

• 核心bug：每个MovieCard组件实例都单独维护了一份私有的items收藏状态，所有卡片没有共享同一份收藏数据源。当页面渲染多个电影卡片时，每个卡片挂载时只会读取一次当时的localStorage值作为初始状态，点击某张卡片时只会更新当前卡片实例内部的items，其他卡片持有的items还是初始化时的旧值。后续点击其他卡片时，会基于自己持有的旧数组追加当前电影，写入localStorage时就会直接覆盖掉之前其他卡片存的内容，自然没法实现追加效果。
• 附带逻辑问题：爱心按钮的交互逻辑是断裂的：点击空心爱心触发添加收藏时，没有同步把liked状态设为true；点击实心爱心时只修改了liked状态，没有把对应电影从收藏列表里移除，实际收藏状态和UI显示完全不匹配。

推荐按照React单向数据流原则，把收藏相关的状态提升到所有MovieCard共同的父组件（比如电影列表页、全局布局组件），如果收藏功能需要跨页面使用，也可以结合Context做全局状态管理，保证所有卡片操作的是同一份状态数据。
父组件管理状态的核心逻辑参考：

// 父组件示例（比如MovieList页）
import { useState, useEffect } from "react";
import MovieCard from "./MovieCard";

const MovieList = () => {
  // 收藏状态统一在父组件维护
  const [favorites, setFavorites] = useState(
    JSON.parse(localStorage.getItem("favorites")) || []
  );

  // 统一持久化到localStorage
  useEffect(() => {
    localStorage.setItem("favorites", JSON.stringify(favorites));
  }, [favorites]);

  // 统一添加收藏方法，顺便做ID去重
  const addFavorite = (movie) => {
    setFavorites(prev => {
      if (prev.some(item => item.id === movie.id)) return prev;
      return [...prev, movie]
    })
  }

  // 统一移除收藏方法
  const removeFavorite = (movieId) => {
    setFavorites(prev => prev.filter(item => item.id !== movieId))
  }

  return (
    <div className="movie-list">
      {/* 把状态和方法通过props传给每个卡片 */}
      {movieList.map(movie => (
        <MovieCard 
          key={movie.id} 
          movie={movie}
          favorites={favorites}
          addFavorite={addFavorite}
          removeFavorite={removeFavorite}
        />
      ))}
    </div>
  )
}

修正后的MovieCard组件代码，去掉冗余的本地状态：

import React from "react";
import { Link } from "react-router-dom";
import { AiOutlineHeart, AiFillHeart } from "react-icons/ai";
import styles from "./MovieCard.module.css";

const imagePrefixUrl = "http://image.tmdb.org/t/p/w500";

const MovieCard = (props) => {
  const { movie, favorites, addFavorite, removeFavorite } = props;
  // 直接从传入的收藏列表推导当前电影的收藏状态，不需要单独维护liked状态
  const isLiked = favorites.some(item => item.id === movie.id);

  const toggleFavoriteHandler = () => {
    if (isLiked) {
      removeFavorite(movie.id);
    } else {
      addFavorite(movie);
    }
  };

  return (
    <div className={styles.container}>
      <button className={styles.heartIcon} onClick={toggleFavoriteHandler}>
        {isLiked ? <AiFillHeart /> : <AiOutlineHeart />}
      </button>
      <Link to={`/movie/${movie.id}`} title={movie?.title}>
        <img src={`${imagePrefixUrl}${movie?.backdrop_path}`} alt={movie?.title} />
        <p>{movie?.title}</p>
      </Link>
    </div>
  );
};

export default MovieCard;

如果暂时不想调整组件结构做状态提升，也可以在添加收藏的方法里直接读取最新的localStorage值做追加，避免闭包持有旧状态的问题，但这种方案在多卡片快速触发更新时仍有概率出现覆盖问题，只适合临时应急：

const addFavoriteHandler = (movie) => {
  // 每次操作直接读最新的本地存储值
  const latestList = JSON.parse(localStorage.getItem("favorites")) || [];
  // 去重后再写入
  if (!latestList.some(item => item.id === movie.id)) {
    const newList = [...latestList, movie];
    localStorage.setItem("favorites", JSON.stringify(newList));
    setItems(newList);
  }
};
// 记得移除原来依赖items写入localStorage的useEffect，避免重复写入

额外优化：添加收藏时必须加一层电影ID去重判断，避免用户重复点击同一张卡片导致同一部电影被多次加入收藏数组。

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