Javascript 使用MobX中的“useLocalObservable”处理TypeScript时出现TypeError？

我基本上遵循了将我的应用程序转换为使用MobxV6的要点。我使用的是

useLocalObservable

，因为

useLocalStore

在MobxV6中被弃用

我得到的错误在

FrameItStore

的

useLocalObservable

内部：

Argument of type 'typeof FrameItStore' is not assignable to parameter of type '() => Record<string, any>'.
  Type 'typeof FrameItStore' provides no match for the signature '(): Record<string, any>'.ts(2345)

FrameItContext.tsx

import*作为来自“React”的React
从“mobx react”导入{useLocalObservable}
从“/FrameItStore”导入{FrameItStore}
const FrameItContext=React.createContext（null）
export const FrameItProvider=（{children}:{children:React.ReactChild}）=>{
const frameItStore=useLocalObservable（frameItStore）
返回(
{儿童}
)
}
export const useFrameItStore=（）=>React.useContext（FrameItContext）

您遵循的回购协议是。代码中的一种等效方法是为

useLocalObservable

使用

FrameItStore

类的实例

您还可以从指定给

useLocalObservable

的函数返回此实例，以便在组件的第一次渲染时仅创建一个实例

const FrameItContext=React.createContext（null）；
export const FrameItProvider=（{children}:{children:React.ReactChild}）=>{
const frameItStore=useLocalObservable（（）=>new frameItStore（））；
返回(
{儿童}
);
};

export type Window = {
  width: number
  height: number
}

export type Point = {
  x: number
  y: number
}

export type TrafficSignal = {
  close: string
  minimize: string
  maximize: string
}

export type TrafficSignalPosition = {
  close: Point
  minimize: Point
  maximize: Point
}

export interface IFrameItStore {
  id: number
  trafficSignalColors: Array<TrafficSignal>
}

import { makeObservable, observable, action, computed } from 'mobx'

import type {
  TrafficSignal,
  Point,
  Window,
  TrafficSignalPosition,
  IFrameItStore,
} from '../types'

export class FrameItStore implements IFrameItStore {
  id = 0
  trafficSignalColors = [
    {
      close: '#EF4444',
      minimize: '#FBBE25',
      maximize: '#49DE80',
    },
    {
      close: 'black',
      minimize: 'blue',
      maximize: 'orange',
    },
  ]

  constructor() {
    makeObservable(this, {
      win: observable,
      box: observable,
      boxCenter: computed,
      trafficSignalPosition: computed,
      trafficSignalColors: observable,
      id: observable,
    })
  }

  win(): Window {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
    }
  }

  box(): Window {
    return {
      width: 1024,
      height: 600,
    }
  }

  get boxCenter(): Point {
    return {
      x: (this.win().width - this.box().width) / 2,
      y: (this.win().height - this.box().height) / 2,
    }
  }

  get trafficSignalPosition(): TrafficSignalPosition {
    return {
      close: { x: this.boxCenter.x + 20, y: this.boxCenter.y + 20 },
      minimize: { x: this.boxCenter.x + 2 * 20, y: this.boxCenter.y + 20 },
      maximize: { x: this.boxCenter.x + 3 * 20, y: this.boxCenter.y + 20 },
    }
  }
}

export const config = new FrameItStore()

import * as React from 'react'
import { useLocalObservable } from 'mobx-react'

import { FrameItStore } from './FrameItStore'

const FrameItContext = React.createContext(null)

export const FrameItProvider = ({ children }: { children: React.ReactChild }) => {
  const frameItStore = useLocalObservable(FrameItStore)

  return (
    <FrameItContext.Provider value={frameItStore}>
      {children}
    </FrameItContext.Provider>
  )
}

export const useFrameItStore = () => React.useContext(FrameItContext)