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

【问题标题】：How to use TypeScript with a custom hook for reactjs useContext?如何将 TypeScript 与 reactjs useContext 的自定义钩子一起使用？
【发布时间】：2021-11-08 12:35:53
【问题描述】：

我正在尝试重构我的上下文以在 TypeScript 中使用自定义钩子，但我遇到了一个我不知道如何修复的错误。

这是错误：

此表达式不可调用。并非所有类型的成分 '布尔值 | Dispatch' 是可调用的。类型“假”没有调用签名。 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。

【问题讨论】：

标签： reactjs typescript react-context

【解决方案1】：

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

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

const [ , setIsOffline ] = useOfflineContext();

【讨论】：