使用 MobX 中的 `useLocalObservable` 来处理 TypeScript 时出现 TypeError 吗？

问题描述

我基本上遵循 this video 指向 this repo 将我的应用程序转换为使用 MobX v6。我正在使用 useLocalObservable，因为 useLocalStore 在 MobX v6 中已被弃用。

我得到的错误是在 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)

然后整个 return 语句在 VSCode 中用红色波浪线表示。

想知道如何修复它？

types.ts

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>
}

FrameItStore.ts

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,maximize: { x: this.BoxCenter.x + 3 * 20,}
  }
}

export const config = new FrameItStore()

FrameItContext.tsx

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)

解决方法

您关注的存储库 returns an object 即 used for useLocalStore。代码中的等效项是将 FrameItStore 类的实例用于 useLocalObservable。

您还可以从提供给 useLocalObservable 的函数返回此实例，以便在组件的第一次渲染时仅创建一个实例。

const FrameItContext = React.createContext<IFrameItStore | null>(null);

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

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