Question

我正在开发一个应用程序，我正在使用 next.js，我在尝试对对象进行字符串化时遇到问题，这就是错误的样子

Argument of type '{ auth: dataObject; }' is not assignable to parameter of type 'string'

所以发生的情况是，当用户登录时，我试图在 localStorage 中保存一些数据，据我所知，如果您将数据保存在那里，它必须是一个字符串（我真的不知道为什么）所以这就是我使用 json.stringify（在我的代码中）的原因。

现在，为了给您更多上下文，让我向您展示我的代码

这是我的上下文 - useReducer 部分（问题出在 LOGIN 案例中！）

import { createContext } from "react";

import {
  Actions,
  dataObject,
  LOGIN,
  LOGOUT,
  LOADING
} from "../GlobalInterfaces/AuthContextInterfaces";
import { useReducer } from "react";
import { useContext } from "react";

interface Istate {
  loading: boolean;
  data?: dataObject | null;
}

const DefaultState = createContext<Istate>({ loading: false });

const DispatchActions = createContext(null);

const localReducer = (state: Istate, action: Actions): Istate => {
  switch (action.type) {
    case LOADING:
      return {
        ...state,
        loading: true
      };

    case LOGIN:
      JSON.stringify(localStorage.setItem("Auth", { auth: action.payload }));
      return {
        ...state,
        loading: false,
        data: action.payload
      };

    case LOGOUT:
      localStorage.removeItem("Auth");
      return {
        ...state,
        data: null
      };

    default:
      return state;
  }
};

export const AuthContext = ({ children }: { children: React.ReactNode }) => {
  const [state, dispatch] = useReducer(localReducer, {
    loading: false,
    data: null
  });

  return (
    <DefaultState.Provider value={state}>
      <DispatchActions.Provider value={dispatch}>
        {children}
      </DispatchActions.Provider>
    </DefaultState.Provider>
  );
};

export const AuthData = () => useContext(DefaultState);
export const AuthActions = () => useContext(DispatchActions);

这些是我与 useContext 和 useReducer 一起使用的类型和接口

// Data

export type dataObject = {
  token: string;
  user: { id: string; email: string; name: string };
};

// Options's Actions

export const LOGIN = "LOGIN";
export const LOGOUT = "LOGOUT";
export const LOADING = "LOADING";

interface IloginAuth {
  type: typeof LOGIN;
  payload: dataObject;
}

interface IloginLogout {
  type: typeof LOGOUT;
}

interface Iloading {
  type: typeof LOADING;
}

export type Actions = IloginAuth | IloginLogout | Iloading;

SO 我该怎么做才能修复我的代码？我可以跳过 JSON.stringify 吗？

感谢您的时间！

Answer 1

JSON.stringify(localStorage.setItem("Auth", { auth: action.payload }));

setItem 的第二个参数需要是一个字符串。你在一个对象中传递它。您需要以相反的顺序进行这些操作。

localStorage.setItem("Auth", JSON.stringify({ auth: action.payload }));

带有打字稿的 Next.js - useContext 错误

1 个答案: