Мне нужно создать страницу оплаты карточкой, на которой нужно показать сохраненные карточки. Также есть возможность сохранять новые карты. Я использую массив строк stati c для хранения сохраненных карточек. Но при рендеринге html выдает ошибку, что «Свойство« Карты »является членом c типа« CardStore ». Я использую mobx и машинопись.
CardStore.ts
import {action, computed, observable} from "mobx";
class CardStore {
@observable public static cardList: string[] = ['testcard1', 'testcard2'];
@action
public static addCard = (card: string) => {
CardStore.cardList.push(card);
console.log("------------- add card:" + card)
console.log("------------- total cards:" + CardStore.cardList.length)
}
@computed
public static get cards() {
console.log("------------- get total cards:" + CardStore.cardList.length)
return CardStore.cardList;
}
}
const store = new CardStore();
export default store;
Cart.tsx
import {inject, observer} from "mobx-react";
import * as React from "react";
import ItemModel from "../items/item/ItemModel";
import CartStore from "./store/CartStore";
import {Trans} from 'react-i18next';
import EmptyMessage from "./empty-alert/EmptyAlert";
import ItemEntry from "./item-entry/ItemEntry";
import {Card, CardContent} from "@material-ui/core";
import CardStore from "./../cards/store/CardStore";
export class Cart extends React.Component {
...
public render() {
...
return (
...
<Card hidden={!this.isCardPaymentMethodSelected}>
<CardContent>
<label> Card Selection </label>
<div className="container" id="cards">
{CardStore.cards.map(
(card) => <label>
<input type="radio" name="selectedCard" value={card} onChange={this.handleCardSelectionChange}/>
{card}
</label>)}
</div>
<div>
<label>
<input type="radio" name="selectedCard" value="newCard" onChange={this.handleCardSelectionChange}/>
Pay with new card
</label>
</div>
</CardContent>
</Card>
...
);
}
}
}
Ошибка при "CardStore.cards". Как получить доступ к этой переменной stati c отсюда?