React中LocalStorage存储JSON数据刷新读取异常及TypeScript类型报错

1. 修复TypeScript类型错误 #

localStorage.getItem('chatLInes')返回值类型是string | null，而JSON.parse()只接受string类型，这就是红线报错的核心原因。你可以通过兜底默认值来解决：
把JSON.parse(localStorage.getItem('chatLInes')) ?? []改成JSON.parse(localStorage.getItem('chatLInes') || '[]')，这样当localStorage中没有数据时，会用空数组的JSON字符串'[]'来解析，既满足类型要求，也能得到默认的空数组。

修改后的useEffect：

useEffect(() => {
    setChatLInes(JSON.parse(localStorage.getItem('chatLInes') || '[]'));
}, []);

2. 解决刷新时数据被重写的问题 #

你的makeMessages函数每次调用都会创建全新的空数组tempChatLInes，直接覆盖原有的chatLines和localStorage数据，这就导致刷新后之前的聊天记录丢失。正确的做法是追加新消息到现有聊天记录，而不是覆盖：

修改后的makeMessages函数：

const makeMessages = (messages: any) => {
    setMessages(messages);

    // 生成新的聊天条目
    const newChatLines = messages.map((message: any) => ({
        userName: user.userName,
        color: user.color,
        message: message
    }));

    // 获取当前已有的聊天记录，合并新条目
    const updatedChatLines = [...chatLines, ...newChatLines];

    // 更新状态和localStorage
    setChatLInes(updatedChatLines);
    changeChatLines(updatedChatLines);
    // 注意：setChatLInes是异步操作，直接log chatLines无法获取最新值，可通过useEffect监听chatLines变化验证
};

另外你原map函数的写法有误：map的返回值应为单个元素处理后的结果，而非整个数组，上面的代码已修正该问题。

额外优化建议 #

• 避免滥用any类型，定义明确的类型可以减少潜在bug，比如：

interface ChatLine {
    userName: string;
    color: string;
    message: string;
}
// 将相关的any替换为ChatLine类型

• 统一变量名拼写：chatLInes建议改成chatLines（修正大小写），避免拼写错误引发的隐性问题。

内容的提问来源于stack exchange，提问作者Danko Grgić