nextjs 反应反冲力将值保留在本地存储中：初始页面加载处于错误状态

Question

我有以下代码，

const Layout: React.FC<LayoutProps> = ({ children }) => {
    const darkMode = useRecoilValue(darkModeAtom)
    
    console.log('darkMode: ', darkMode)
    return (
        <div className={`max-w-6xl mx-auto my-2 ${darkMode ? 'dark' : ''}`}>
            <Nav />
            {children}
            <style jsx global>{`
                body {
                    background-color: ${darkMode ? '#12232e' : '#eefbfb'};
                }
            `}</style>
        </div>
    )
}

我正在使用 recoil 和recoil-persist。那么，当 darkMode 值为 true 时，className 应该包含一个 dark 类，对吧？但事实并非如此。我不知道这里出了什么问题。但是第一次刷新的时候不行，之后就正常了。我还尝试使用 darkMode === true 条件，但它仍然不起作用。您会看到样式化的 jsx，效果很好。这随着 darkMode 值的变化而变化，当我刷新时，它会保留数据。但是当我检查时，我没有在第一个 div 中看到黑暗类。另外，当我 console.log darkMode 值时，我看到 true，但不包括 dark 类。

这是沙盒链接

也许这是一个愚蠢的错误，但我在这上面浪费了很多时间。那么我在这里做错了什么？

Answer 1

问题是在 SSR（服务器端渲染）期间没有localStorage/Storage对象可用。因此来自服务器的结果 html 始终darkMode设置为false. 这就是为什么您可以在控制台中看到水化步骤上不匹配的标记错误。

我假设使用一些始终处于false初始渲染（在水合步骤期间）的状态来匹配 SSR 的 html，但稍后将使用实际darkMode值。就像是：

// themeStates.ts
import * as React from "react";
import { atom, useRecoilState } from "recoil";
import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist();

export const darkModeAtom = atom<boolean>({
  key: "darkMode",
  default: false,
  effects_UNSTABLE: [persistAtom]
});

export function useDarkMode() {
  const [isInitial, setIsInitial] = React.useState(true);
  const [darkModeStored, setDarkModeStored] = useRecoilState(darkModeAtom);

  React.useEffect(() => {
    setIsInitial(false);
  }, []);

  return [
    isInitial === true ? false : darkModeStored,
    setDarkModeStored
  ] as const;
}

内部组件这样使用它：

// Layout.tsx
  const [darkMode] = useDarkMode();
// Nav.tsx
  const [darkMode, setDarkMode] = useDarkMode();

代码沙盒链接

Answer 2

扩展 @aleksxor 解决方案，您可以useEffect按如下方式执行一次。

首先创建一个原子来处理 SSR 完成状态，并创建一个方便的函数来设置它。

import { atom, useSetRecoilState } from "recoil"

const ssrCompletedState = atom({
  key: "SsrCompleted",
  default: false,
})

export const useSsrComplectedState = () => {
  const setSsrCompleted = useSetRecoilState(ssrCompletedState)
  return () => setSsrCompleted(true)
}

然后在您的代码中添加钩子。确保它是 Recoil 提供程序的内部组件。

const setSsrCompleted = useSsrComplectedState()
useEffect(setSsrCompleted, [setSsrCompleted])

现在创建一个原子效果来替换 recoil-persist persistAtom。

const setSsrCompleted = useSsrComplectedState()
useEffect(setSsrCompleted, [setSsrCompleted])

现在在您的原子中使用这个新函数。

import { AtomEffect } from "recoil"
import { recoilPersist } from "recoil-persist"

const { persistAtom } = recoilPersist()

export const persistAtomEffect = <T>(param: Parameters<AtomEffect<T>>[0]) => {
  param.getPromise(ssrCompletedState).then(() => persistAtom(param))
}