Typescript 和 ReactJS：以前的 state 如何使其工作

Question

我無法在 React 18 上使用 Typescript 版本 4.8.3 制作以前的 state。

這是我的 refreshToken 代碼，我收到錯誤：

'(prev: any) => any' 類型的值與'IUserData' 類型沒有共同的屬性。 你的意思是叫它嗎？ts(2560)

on（prev：any），所以我嘗試在我的'IUserData'中添加prev（useAuth（）與IUserData相關），但它不起作用......

const useRefreshToken = () => {
    const { setAuth } = useAuth();

    const refresh = async () => {
        const response = await axios.get('/refresh', {
            withCredentials: true 
        });
        setAuth((prev: any) => { 
            return { 
                ...prev, 
                role: response.data.idRole, 
                accessToken: response.data.accessToken }
        });
        return response.data.accessToken;
    }
    return refresh;
};

export default useRefreshToken;

我的 IUserData 接口：

export interface IUserData {
    id?: number
    email?: string
    role?: number
    accessToken?: string
    auth?: {id?: number
        email?: string
        role?: number
        accessToken?: string
    }
    setAuth?: Dispatch<SetStateAction<IUserData>>
    setPersist?: Dispatch<SetStateAction<boolean>> | Dispatch<any>
}

當我嘗試使用 (prev: IUserData) 我得到錯誤：

'(prev: IUserData) => { accessToken: any; 類型的值 id?: 號碼 | 不明確的; email?: 字符串 | 不明確的; 角色？：號碼 | 不明確的; auth?: { id?: number | 不明確的; email?: 字符串 | 不明確的; 角色？：號碼 | 不明確的; accessToken?: 字符串 | 不明確的; } | 不明確的; setAuth?: 調度<...> | 不明確的; setPersist?: Dispatch...' 與類型 'IUserData' 沒有共同的屬性。 你的意思是叫它嗎？ts(2560)

你有什么建議嗎？

Answer 1

在 IUserData 內更改 setAuth 中的類型

例如：

type AuthData = {
    id?: number
    email?: string
    role?: number
    accessToken?: string
}

export interface IUserData {
    id?: number
    email?: string
    role?: number
    accessToken?: string
    auth?: AuthData,
    setAuth?: Dispatch<SetStateAction<AuthData>>
    setPersist?: Dispatch<SetStateAction<boolean>> | Dispatch<any>
}

並從您的 prevState 中刪除 any 類型

...
setAuth((prev) => { 
  return { 
    ...prev, 
    role: response.data.idRole, 
    accessToken: response.data.accessToken 
  }
});
...