我不断收到错误“类型‘{}’上不存在属性‘store’。”将 NextJS 与 Mobx 结合使用时来自打字稿。我正在使用 NextJS v14.1.0 和应用程序路由器设置。
如何在 NextJS 中正确定义状态存储的类型?
我的代码的附加说明,目前我的
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;
您可以告诉
observer
它将哪种类型传递到您的页面,如下所示:
const observableClickStore = new ObservableClickStore();
const Home = observer<{ store: ObservableClickStore }>(({ store }) => {
// ...
return <></>;
});
const Games = () => {
return <Home store={observableClickStore} />;
};
export default Games;