使用带有 SSR (Next.js) 应用程序的 localStorage 持久化 React 状态时遇到问题

Question

我正在制作的应用具有可自定义的设置。我想加载默认设置，然后当用户进行任何更改时，自定义设置将存储在 localStorage 中。现在，下次用户回来时，我们将从他们的 localStorage 加载设置。

我正在像这样使用 React 上下文...

    const SettingsContextProvider = (props: any) => {
        const [settings, setSettings] = useState(getSettings());

        useEffect(() => {
            localStorage.setItem('settings', JSON.stringify(settings))
        }, [settings]);

        return (...some jsx...);
    }

然后getSettings()...

   getSettings() {
       // get from local storage
       if (process.browser) {
           const localSettings = localStorage.getItem('settings');
           if (localSettings) return JSON.parse(localSettings );
       }

       // fall back to default settings
       return "Something else";
   }

我遇到的问题是服务器端负载（在节点端），我们没有本地存储（这就是我检查process.browser 的原因），所以它回退到默认设置。然后当它到达浏览器时，它似乎再次调用getSettings()，在这种情况下，我们确实有本地存储，它从那里加载。

这行得通，但我得到一个错误：

Text content did not match. Server: "Something else" Client: "Something custom"

所以我知道服务器与客户端不匹配并且对此感到不安。我明白为什么会这样，但我不知道如何解决它。也许我需要实现 reducer 或使用 cookie？

有人遇到过这个吗？

如果有帮助，我非常乐意分享我的完整回购代码。

Answer 1

我对 react 相当熟悉，但我几乎从未在自己的代码中使用过 react 钩子。

但是，我觉得我不会将 localStorage 的更新放入这样的 useEffect 函数中（我可能完全错了）。

所以，首先，我会检查 useEffect 函数是否在您期望的时候被调用。

然后，我会写一个函数

 const updateSettings = (newSettings) => {
      localStorage.setItem('settings', JSON.stringify(newSettings))
      setSettings(newSettings);
 }

并使用 updateSettings 函数向下传递给组件。

但是，我可能完全不在那儿，就像我说的那样，我不使用反应钩子，只有理论上的理解。