类型 'Context' 缺少类型 'Context<unknown>' 的以下属性：提供者、消费者 TS2345

Question

我正在尝试使用 rootstore 访问我的 React 项目中的两个不同的商店。 RoorStore.ts =>

import ExtractionStore from "./extractionStore";
import UserStore from "./userStore";
import { createContext } from "vm";

export class RootStore {
  extractionStore: ExtractionStore;
  userStore: UserStore;

  constructor() {
    this.extractionStore = new ExtractionStore(this);
    this.userStore = new UserStore(this);
  }
}

export const RootStoreContext = createContext(new RootStore());

然而，在尝试将其注入我的组件时出现错误：

组件 tsx =>

    const ExtractionDashboard: React.FC = () => {
      const rootStore = useContext(RootStoreContext);
      const { loadWorkList, loadingInitial } = rootStore.extractionStore;

错误：

Argument of type 'Context' is not assignable to parameter of type 'Context<unknown>'.
  Type 'Context' is missing the following properties from type 'Context<unknown>': Provider, Consumer  TS2345

     7 | 
     8 | const ExtractionDashboard: React.FC = () => {
  >  9 |   const rootStore = useContext(RootStoreContext);
       |                                ^
    10 |   const { loadWorkList, loadingInitial } = rootStore.extractionStore;
    11 | 
    12 |   useEffect(() => {

Answer 1

您正在正确导入 createContext 函数

你有什么

import { createContext } from "vm";

你应该拥有的

import { createContext } from "react";

Answer 2

我曾经遇到过这个错误，但不是因为导入不正确。在我的例子中，我试图在不应该的时候为我的（去结构化的）上下文对象分配一个类型。

interface ContextInterface {
    name: string;
}

const Context = createContext<ContextInterface>({ name: 'John Smith' });

//error here: Type 'ContextInterface' is missing the following properties from type 'Context<ContextInterface>': Provider, Consumer ts(2739)
const { name }: React.Context<ContextInterface> = useContext<ContextInterface>(Context);

删除 React.Context<ContextInterface> 解决了错误。

//no error
const { name } = useContext<ContextInterface>(Context);

类型 'Context' 缺少类型 'Context<unknown>' 的以下属性：提供者、消费者 TS2345

Type 'Context' is missing the following properties from type 'Context<unknown>': Provider, Consumer TS2345

typescript

reactjs

mobx