为什么localStorage.removeItem仅按最后添加顺序倒序删除才能生效？

问题根因 #

你的代码存在5处核心逻辑错误，共同导致删除顺序异常、存储混乱问题：

• 删除函数的索引匹配逻辑完全错误：findIndex((movie) => movie.title) 会永远返回第一个元素的下标，而非匹配传入的目标电影
• 直接修改React状态原数组：对状态变量nominated直接执行splice属于状态突变，React无法触发正确的重渲染
• 初始加载逻辑重复更新状态：forEach循环内多次执行setNominated、setNominatedCount，导致计数和状态值计算错误
• 存储逻辑判断位置错误：nominated.length > 5的判断放在循环内，只要列表长度超5就会终止全部存储操作
• 列表渲染用index作为key：删除元素时索引会变动，导致元素和点击事件绑定错乱

修复代码 #

JS逻辑部分 #

// 从localStorage加载数据渲染
useEffect(() => {
  const storedMovies = Object.values(localStorage).map(item => JSON.parse(item))
  setNominated(storedMovies)
  setNominatedCount(storedMovies.length)
}, [])

// 删除提名电影
const removeNomination = (targetMovie) => {
  localStorage.removeItem(targetMovie.imdbID)
  // 先拷贝状态数组再操作，避免突变原状态
  const newNominated = nominated.filter(movie => movie.imdbID !== targetMovie.imdbID)
  setNominated(newNominated)
  setNominatedCount(newNominated.length)
}

// 同步到localStorage，最多存5条
useEffect(() => {
  // 最多保留前5条，超出的直接截断
  const validNominated = nominated.slice(0,5)
  validNominated.forEach(movie => {
    localStorage.setItem(movie.imdbID, JSON.stringify(movie))
  })
  console.log("nominated:", validNominated)
}, [nominated])

按钮渲染部分 #

<!-- 用唯一的imdbID作为key，不要用index -->
<Button key={movie.imdbID} onClick={()=> { removeNomination(movie); }}>
         Remove
    </Button>

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