类型 { } 上不存在属性“store” - MobX & React & TypeScript

Question

我不断收到错误“类型‘{}’上不存在属性‘store’。”将 Next.js 与 Mobx 结合使用时来自 TypeScript。我正在使用 Next.js v14.1.0 和应用程序路由器设置。

如何在 Next.js 中正确定义状态存储的类型？

我的代码的附加说明，目前我的

ObservableClickStore

与

page.tsx

组件位于同一页面 (

Home

) 中。

Home

是一个将再次传递给

Games

的组件，

page.tsx

将渲染

Games

（我也不确定这种方法，似乎效率低下且多余。

// ./src/app/page.tsx

class ObservableClickStore {
  counter: number = 0;
  openedCards: ICard[] = [];
  clickedCards: ICard[] = [];
  nonShuffledCharacters: ICard[] = [
    { text: "Saya", answer: "I", isRevealed: false },
    // clickCard function logic. Removed to make concise...
  ]

  characters = this.nonShuffledCharacters.sort(() => Math.random() - 0.5);
  constructor() {
    makeObservable(this, {
      counter: observable,
      characters: observable,
      clickCard: action,
      toggleIsRevealed: action,
      clearClickedCards: action,
      reset: action,
    });
    autorun(() => console.log(this.report));
  }

  get report() {
    return this.characters;
  }

  toggleIsRevealed = (card: ICard) => {
    const index = this.characters.indexOf(card)
    this.characters[index].isRevealed = !this.characters[index].isRevealed;
  }

  clearClickedCards = () => {
    this.clickedCards = []
  }

  reset = () => {
    // reset function logic. Removed to make concise...
  }

  clickCard = (card: ICard) => {
    // clickCard function logic. Removed to make concise...
  }
}

const observableClickStore = new ObservableClickStore();

const Home = observer(({ store }) => {

  const backside = "🍊";
  const quizCardList = store.characters.map((character: ICard, i: number) =>
    <div className='m-1' key={i}>
      <div onClick={() => store.clickCard(character)}>
        <QuizCard revealCard={character.isRevealed} backside={backside} frontside={character.text} />
      </div>
    </div >
  )

  return (
    <>
      // render HTML...
    <>
})

const Games = () => {
  return <Home store={observableClickStore} />
}

export default Games;

Answer 1

您可以告诉

observer

它正在传递到您的页面哪种类型的商店，如下所示：

const observableClickStore = new ObservableClickStore();

const Home = observer<{ store: ObservableClickStore }>(({ store }) => {
  // ...
  return <></>;
});

const Games = () => {
  return <Home store={observableClickStore} />;
};

export default Games;