如何将 TypeScript 与 reactjs useContext 的自定义挂钩一起使用？

Question

我正在尝试重构我的上下文以在 TypeScript 中使用自定义挂钩，但出现错误我不知道如何修复。

这是错误：

This expression is not callable. Not all constituents of type 'boolean | Dispatch<SetStateAction>' are callable. Type 'false' has no call signatures. 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）。）

所以我的问题是：在 return 上下文的自定义挂钩中使用时如何正确键入 useState？

目前正在使用 TypeScript 4.3。

Answer 1

您使用的是返回数组的第一个元素，即 isOffline（布尔值），但您称它为 setIsOffline。但是，它仍然是一个布尔值。

您可能想要的是获取数组的第二个元素：

const [ , setIsOffline ] = useOfflineContext();

如何将 TypeScript 与 reactjs useContext 的自定义挂钩一起使用？

How to use TypeScript with a custom hook for reactjs useContext?

typescript

reactjs

react-context