Как использовать свойство stati c с использованием машинописного текста mobx - PullRequest
0 голосов
/ 06 марта 2020

Мне нужно создать страницу оплаты карточкой, на которой нужно показать сохраненные карточки. Также есть возможность сохранять новые карты. Я использую массив строк 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 отсюда?

1 Ответ

0 голосов
/ 06 марта 2020

Вы экспортируете экземпляр из CardStore.ts, вам также необходимо экспортировать класс

export class CardStore {
...
}

Затем вы должны импортировать его следующим образом в файл Cart.tsx:

import {CardStore} from "./../cards/store/CardStore";

В вашем классе CardStore есть только методы / поля c, поэтому вы должны напрямую использовать этот класс.

...