React Typescript Context - 类型问题

Question

我目前正在使用 React 学习 TypeScript，我发现有些部分非常具有挑战性。我已经创建了 cart.context.tsx 但我不断收到以下错误：

(property) React.ProviderProps<AppContextInterface>.value: AppContextInterface
Type '{ isCartOpen: boolean; setIsCartOpen: React.Dispatch<React.SetStateAction<boolean>>; }' is not assignable to type 'AppContextInterface'.
  Types of property 'setIsCartOpen' are incompatible.
    Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '(value: Dispatch<SetStateAction<boolean>>) => boolean'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type 'SetStateAction<boolean>'.
          Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '(prevState: boolean) => boolean'.
            Type 'void' is not assignable to type 'boolean'.ts(2322)
index.d.ts(338, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<AppContextInterface>'

这是我的代码：

import { createContext, ReactNode, useState } from "react";

interface AppContextInterface {
  isCartOpen: boolean;
  setIsCartOpen: (value: React.Dispatch<React.SetStateAction<boolean>>) => boolean;
}

export const cartContextDefaultValue: AppContextInterface = {
  isCartOpen: false,
  setIsCartOpen: () => false
}

export const CartContext = createContext<AppContextInterface>(cartContextDefaultValue);

export const CartProvider = ({ children }: { children: ReactNode }) => {
  const [isCartOpen, setIsCartOpen] = useState<boolean>(false);
  const value = { isCartOpen, setIsCartOpen }

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
};

错误在带​​有 value 属性的最后一行抛出：

return <CartContext.Provider value={value}>{children}</CartContext.Provider>;

有人可以看一下并提供帮助吗？我做错了什么？

Answer 1

将您的界面替换AppContextInterface为：

interface AppContextInterface {
  isCartOpen: boolean;
  setIsCartOpen: Dispatch<SetStateAction<boolean>>;
}

您还需要像这样导入Dispatch和来自反应：SetStateAction

import { createContext, Dispatch, ReactNode, SetStateAction, useState } from "react";

它应该可以解决这个问题。

这setIsCartOpen是一个从 hook 返回的函数useState()，因此它的类型不能是(value: React.Dispatch<React.SetStateAction<boolean>>) => boolean;。这就是您收到此错误的原因。

完整代码：

interface AppContextInterface {
  isCartOpen: boolean;
  setIsCartOpen: Dispatch<SetStateAction<boolean>>;
}