Node.js 使用`useLocalStorage`和`useDebounce`时如何解决Next.js中的reacthydrationerror

我建议看看这本由Josh W Comeau compose 的关于补液的优秀post.

由于Next.js默认情况下会预先呈现每个页面，因此您需要确保调用window.localst或age的组件只在客户机上呈现.

一个简单的解决方案是:

1. 保持hasMounted状态

const [hasMounted, setHasMounted] = useState(false);

2. 在useEffect内切换

useEffect(() => {
  // This will only be called once the component is mounted inside the browser
  setHasMounted(true);
}, []);

3. 添加复选标记，这样Next.js就不会抱怨在服务器上预先呈现的内容与客户端上呈现的内容不匹配

if (!hasMounted) {
  return null;
}

4. 确保客户端的东西在判断后送到

要使其更具可重用性，您可以使用这两种方法中的一种，这两种方法实质上是相同的:

仅客户端组件

function ClientOnly({ children, ...delegated }) {
  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }
  /**
   * Could also replace the <div></div> with
   * <></> and remove ...delegated if no need
   */
  return (
    <div {...delegated}> 
      {children}
    </div>
  );
}

...

<ClientOnly>
  <MyComponent /> // <--- client only stuff, safe to use useLocalSt或age in here
</ClientOnly>

或

自定义使用Hasmount挂钩

function useHasMounted() {
  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  return hasMounted;
}

...

function ParentComponent() {  
  const hasMounted = useHasMounted();
  if (!hasMounted) {
    return null;
  }
  return (
    <MyComponent />
  );
}

...

function MyComponent() {
  const [toleranceH, setToleranceH] = useLocalSt或age<number>('toleranceH', 3);
  const [toleranceS, setToleranceS] = useLocalSt或age<number>('toleranceS', 3);
  const [toleranceL, setToleranceL] = useLocalSt或age<number>('toleranceL', 3);

  ...
}

...

Note:

By overdoing this 或 using this method at the top level of your component tree, you are killing the Next.js prerendering capabilities and turning your app into m或e of a "client-side heavy" app (see perf或mance implications). If you are using window.localst或age (outside of components, where you don't have useEffect available), you should always wrap with:

if (typeof window !== 'undefined') {
  // client-side code
}