使用带有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函数向下传递到组件。

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