Next 14 - localStorage 刷新后不工作

Question

'use client';
import {
  Dispatch,
  SetStateAction,
  createContext,
  useEffect,
  useState
} from 'react';

interface ColorsContextProps {
  color: 'blue' | 'green' | 'red' | 'orange' | 'violet';

  setColor: Dispatch<
    SetStateAction<'blue' | 'green' | 'red' | 'orange' | 'violet'>
  >;
}

interface ColorsProviderProps {
  children: React.ReactNode;
}

export const ColorsContext = createContext({} as ColorsContextProps);

export function ColorsProvider({ children }: ColorsProviderProps) {
  const [color, setColor] = useState<
    'blue' | 'green' | 'red' | 'orange' | 'violet'
  >(
    (global?.localStorage?.getItem('preferred_color') as
      | 'blue'
      | 'green'
      | 'red'
      | 'orange'
      | 'violet') ?? 'blue'
  );

  useEffect(() => {
    localStorage.setItem('preferred_color', color);
  }, [color]);

  return (
    <ColorsContext.Provider value={{ color, setColor }}>
      {children}
    </ColorsContext.Provider>
  );
}

我有此代码，并且在客户端加载之前我的 localStorage 不可用。所以状态总是设置为蓝色，有人知道该怎么做吗？

我希望状态获得本地存储值

Answer 1

您不能直接使用

localStorage

来初始化状态值，因为正如您所说，

localStorage

在服务器端不可用。

您可以使用 null 值初始化状态，并在客户端加载应用程序后立即使用

effect

更新其值。

您还应该添加

color &&

以仅在设置

color

时才开始渲染。

  const [color, setColor] = useState<...>(null);

  useEffect(() => {
    setColor(window?.localStorage?.getItem('preferred_color') ?? 'blue');
  }, []);

  ...
  
  return color && (
    <ColorsContext.Provider value={{ color, setColor }}>
      {children}
    </ColorsContext.Provider>
  );