在 React 中，我可以通过 JSON 将数据存储在 LocalStorage 中，但似乎无法在重新加载时将其取出。不管我做什么

Question

我设法将数据项放入json中，但是在useEffect上，在重新加载时，该项目会稍微重新加载，但它总是会被重写，并且当我将鼠标悬停在它上面时，我会在

(localStorage.getItem('chatLInes'))

部分下看到红线，并出现此警告：

Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string

这是片段：

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

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

        let tempChatLInes: any = [];
        messages.map((message: any) => {
            let chatLIne = { userName: '', color: '', message: '' };
            chatLIne.userName = user.userName;
            chatLIne.color = user.color;
            chatLIne.message = message;
            tempChatLInes.push(chatLIne);
            return tempChatLInes;
        });

        changeChatLines(tempChatLInes);
        setChatLInes(tempChatLInes);
        console.log(chatLines);
    };
    const changeChatLines = (chatLines: any) =>
        localStorage.setItem('chatLInes', JSON.stringify(chatLines));

”

将 localstorage 部分放在一个单独的变量下，在 typescript 属性中进行 dwabble，关闭 jslint bc 我认为这是一个 typescript 的东西，创建一个单独的函数来处理放入 localstorage 的操作。结果与相同的警告相同

Answer 1

您不需要效果即可从

localStorage

获取值，并且当

'[]'

中没有存储值时，您可以将字符串

JSON.parse

传递给

localStorage

来修复 TypeScript 错误。

const [chatLines, setChatLines] = useState(
           () => JSON.parse(localStorage.getItem('chatLInes') ?? '[]'));