我正在嘗試重構我的背景關系以在 TypeScript 中使用自定義鉤子，但我遇到了一個我不知道如何修復的錯誤。
這是錯誤：
此運算式不可呼叫。并非所有型別為 'boolean | 的成分 | Dispatch<SetStateAction>' 是可呼叫的。'false' 型別沒有呼叫簽名。TS2349
我的自定義鉤子定義如下：
export const useOfflineContext = () => {
const isOffline = React.useContext(OfflineContext);
const setIsOffline = React.useContext(OfflineSetContext);
if (!setIsOffline) {
throw new Error('The OfflineProvider is missing.');
}
return [isOffline, setIsOffline];
};
我這樣稱呼它：
const [setIsOffline] = useOfflineContext();
// Check if we are online or offline.
useEffect(() => {
Network.addListener('networkStatusChange', (networkStatus) => {
// console.log('Network status changed', networkStatus);
if (!networkStatus.connected) {
setIsOffline(true);
這會導致上述錯誤。
這是我的完整組件OfflineContextProvider.tsx：
import React, { useState } from 'react';
const OfflineContext = React.createContext(false);
const OfflineSetContext = React.createContext({} as React.Dispatch<React.SetStateAction<boolean>>);
interface MyProps {
children: JSX.Element,
}
export const OfflineContextProvider: React.VFC<MyProps> = ({ children }: MyProps) => {
const [isOffline, setIsOffline] = useState<boolean>(false);
return (
<OfflineContext.Provider value={isOffline}>
<OfflineSetContext.Provider value={setIsOffline}>
{children}
</OfflineSetContext.Provider>
</OfflineContext.Provider>
);
};
export const useOfflineContext = () => {
const isOffline = React.useContext(OfflineContext);
const setIsOffline = React.useContext(OfflineSetContext);
if (!setIsOffline) {
throw new Error('The OfflineProvider is missing.');
}
return [isOffline, setIsOffline];
};
我不明白為什么，當我特別要求時const [setIsOffline] = useOfflineContext();，TypeScript 認為我可能想要isOffline。 （因為 TypeScript 警告提到了布林值 (isOffline)。）
所以我的問題是：在自定義鉤子中使用時如何正確鍵入 useState 以回傳背景關系？
目前使用 TypeScript 4.3。
uj5u.com熱心網友回復：
您正在使用回傳陣列的第一個元素，即isOffline（布林值），但您正在呼叫它setIsOffline。但是，它仍然是一個布林值。
您可能想要的是獲取陣列的第二個元素：
const [ , setIsOffline ] = useOfflineContext();
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/352876.html
上一篇：React組件未在狀態更新時呈現