我有两个定制的钩子。useLocalStorage和useAuth。

function getDefaultValue<T>(key: string, initialValue: T | null): T | null {
  const storedValue: string | null = localStorage.getItem(key);
  if (storedValue) {
    return JSON.parse(storedValue);
  }
  if (initialValue instanceof Function) {
    initialValue();
  }
  return initialValue;
}

export function useLocalStorage<T>(
  initialValue: T | null,
  key: string
): [T | null, React.Dispatch<React.SetStateAction<T | null>>] {
  const [value, setValue] = useState<T | null>(
    getDefaultValue(key, initialValue)
  );
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

这里是useAuth钩子，它只是useLocalStorage的一个 Package 器，但专门用于身份验证。

export function useAuth(): {
  user: User | null;
  setUser: React.Dispatch<React.SetStateAction<User | null>>;
} {
  const [user, setUser] = useLocalStorage<User>(null, "user-data");

  return {
    user,
    setUser,
  };
}

现在我试着使用下面的钩子

const { setUser } = useAuth();

  const handleLogin = () => {
    console.log(emailRef.current?.value);
    console.log(passwordRef.current?.value);
    console.log(thirtyDaysCheckboxRef.current?.checked);
    //here is where we might call a backend service;
    const user: User = {
      name: "From sign in",
      email: emailRef.current!.value,
    };
    setIsLoading(true);
    setTimeout(() => {
      setUser(user);
      setIsLoading(false);
      navigate("/");
    }, 3000);
  };

**问题：****用户对象没有保存在localStorage中。我不明白为什么一切看起来都很好。只有值null被保存。**可能是什么问题？