React中useEffect结合JSON.parse/stringify失效问题求助

可能的问题点及对应解决方案 #

1. 初始State结构不匹配 #

如果notes的初始状态不是数组（比如设为null/undefined），会导致首次渲染时第二个useEffect直接将空值写入localStorage，覆盖原有数据。

修复：
确保初始State为数组，和存入localStorage的数据结构一致：

const [notes, setNotes] = useState([]);

2. 未处理JSON解析异常 #

若localStorage中存储的不是有效JSON（比如之前误存了非JSON格式内容），JSON.parse会抛出错误，导致加载逻辑中断。

修复：
添加错误捕获与数据有效性校验：

useEffect(() =>{
    try {
        const savedNotes = localStorage.getItem("react-notes-app-data");
        if(savedNotes) {
            const parsedNotes = JSON.parse(savedNotes);
            // 确保解析后的数据是数组格式
            if(Array.isArray(parsedNotes)) {
                setNotes(parsedNotes);
            }
        }
    } catch (err) {
        console.error("加载笔记数据失败:", err);
        // 可选：清空损坏的存储数据
        localStorage.removeItem("react-notes-app-data");
    }
}, []);

3. 写入时机未做过滤 #

第二个useEffect依赖notes，如果初始notes是空数组，会直接覆盖localStorage中已有的有效数据。

修复：
仅当notes有实际内容时才执行写入：

useEffect(() => {
    if(notes.length > 0) {
        localStorage.setItem("react-notes-app-data", JSON.stringify(notes));
    }
}, [notes]);

4. 浏览器环境限制localStorage #

部分浏览器隐私模式、跨域场景会禁用localStorage，导致读写失败。

验证方法：
在浏览器控制台执行以下命令测试：

localStorage.setItem("test-key", "test-value");
console.log(localStorage.getItem("test-key")); // 正常应输出"test-value"

若报错，说明环境限制了localStorage，需考虑sessionStorage或后端存储作为替代方案。

5. 组件重复挂载导致状态重置 #

如果组件被多次挂载（如路由切换场景），可能触发重复加载逻辑或状态被覆盖。

验证方法：
在加载逻辑中添加日志，确认执行时机：

useEffect(() =>{
    console.log("组件挂载，开始加载笔记数据");
    // ... 原有加载逻辑
}, []);

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