React中过滤数组后更新Local Storage致应用崩溃的解决方法

DevOps 小满

2026-8-3

问题解决：React中修改State后同步LocalStorage的正确方式

问题分析

你的应用崩溃核心原因有两个：

初始化state时，若LocalStorage中没有watchListData数据，JSON.parse(localStorage.getItem("watchListData"))会返回null，后续调用filter方法会因null不是数组而报错。
注释掉了同步LocalStorage的useEffect，导致过滤后的数组无法更新到LocalStorage，数据无法持久化。

正确实现步骤

1. 安全初始化State

给初始State设置默认空数组，避免null导致的方法调用错误：

const [savedData, setSavedData] = useState(
  JSON.parse(localStorage.getItem("watchListData")) || []
);

2. 使用useEffect同步LocalStorage

启用被注释的useEffect，监听savedData的变化，每当State更新时自动同步到LocalStorage：

useEffect(() => {
  localStorage.setItem("watchListData", JSON.stringify(savedData));
}, [savedData]);

3. 完整修正后的组件代码

import { useState, useEffect } from "react";

export default function Watchlist() {
  // 安全初始化state，默认空数组
  const [savedData, setSavedData] = useState(
    JSON.parse(localStorage.getItem("watchListData")) || []
  );

  function remove(id) {
    setSavedData((prevSavedData) =>
      prevSavedData.filter((movie) => movie.id !== id)
    );
  }

  // 监听state变化，同步到localStorage
  useEffect(() => {
    localStorage.setItem("watchListData", JSON.stringify(savedData));
  }, [savedData]);

  // 后续渲染逻辑...
}