无法将数据保存到localStorage

Question

我尝试使用浏览器的本地存储来保存单击按钮后的数据，但是如果我刷新页面，我只会看到默认值“Hello”

import { useEffect, useState } from "react";

export default function Home() {
    const [saveButtonHTML, setSaveButtonHTML] = useState(() => {
        if (typeof window !== "undefined") {
            const savedState = localStorage.getItem("buttonState");
            if (savedState) {
                const retrieveData = JSON.parse(savedState);
                return retrieveData.saveButtonHTML;
            }
        }
        return "Hello";
    });

    useEffect(() => {
        const buttonState = {
            saveButtonHTML,
        };

        if (typeof window !== "undefined") {
            localStorage.setItem("buttonState", JSON.stringify(buttonState));
        }
    }, [saveButtonHTML]);

    const handleClick = () => {
        setSaveButtonHTML("Hello Sukhvir");
    };

    return (
        <>
            <button onClick={handleClick}>Click to see Name</button>
            <p>{saveButtonHTML}</p>
        </>
    );
}

Answer 1

根据您在评论中提供的Next.js 文档，我认为“文本内容与服务器渲染的 HTML 不匹配”错误是由于使用 localStorage 来初始化组件的状态而发生的。由于 localStorage 是特定于浏览器的 API，因此应仅在客户端使用它以避免水合不匹配。我认为您应该使用空依赖项数组将 localStorage 逻辑包装在 useEffect 中，以防止与 localStorage 使用相关的水合不匹配。尝试这样做：

import { useEffect, useState } from "react";

export default function Home() {
    const [saveButtonHTML, setSaveButtonHTML] = useState("Hello"); // Default value

    useEffect(() => {
        if (typeof window !== "undefined") {
            const savedState = localStorage.getItem("buttonState");
            if (savedState) {
                const retrieveData = JSON.parse(savedState);
                setSaveButtonHTML(retrieveData.saveButtonHTML);
            }
        }
    }, []); // Run this effect only once after component mounts on the client side

    const handleClick = () => {
        setSaveButtonHTML("Hello Sukhvir");
        // Save the updated value to localStorage here if needed
        localStorage.setItem("buttonState", JSON.stringify({ saveButtonHTML: "Hello Sukhvir" }));
    };

    return (
        <>
            <button onClick={handleClick}>Click to see Name</button>
            <p>{saveButtonHTML}</p>
        </>
    );
}