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

Question

我基本上是在按照 this video which points to this repo 将我的应用程序转换为使用 MobX v6。我正在使用 useLocalObservable，因为 useLocalStore 在 MobX v6 中已被弃用。

我得到的错误是 useLocalObservable 内部的 FrameItStore:

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

Answer 1

您正在关注的回购 returns an object that is used for useLocalStore。您的代码中的等效项是将 FrameItStore class 的实例用于 useLocalObservable.

您还可以 return 从给定 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>
  );
};

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

TypeError when using `useLocalObservable` from MobX to work with TypeScript?

javascript

typescript

reactjs

mobx

mobx-react

types.ts

FrameItStore.ts

FrameItContext.tsx