Объект метода Mobx не является функцией

Question

Я пытаюсь получить доступ к объекту метода (здесь greet() метод) через массив mobx, но я застрял с:

TypeError: person.greet не является функцией

Класс Person

У меня есть класс Person с методом greet:

export class Person {
    public id: number = Date.now();
    public firstName!: string;
    public lastName!: string;

    public greet() : string {
        return "Hello!";
    }
};

Магазин

Мой магазин выглядит так:

import { persist } from "mobx-persist";
import { observable, computed, action } from "mobx";
import { Person } from "../models/Person";

export class PersonStore {

    @persist('list')
    @observable
    personList: Person[] = [];

    @computed get entries(): Person[] {
        return this.personList.slice();
    };
};

В компоненте

В моем компоненте я передаю список следующим образом:

const PeoplePage_: React.FunctionComponent<{ personStore: PersonStore }> = ({ personStore }) => {

    return (
        <PeoplePage
            personList={personStore.entries} />
    );
};
export default inject("personStore")(observer(PeoplePage_));

А потом в моем PeoplePage компоненте, когда я делаю что-то вроде:

personList[0].greet()

Я получаю ошибку.

Answer 1

Проблема была с библиотекой lib mobx-persist, а затем строкой @persist('list')

Это означает, что мой массив сохраняется и извлекается в простом объектном стиле ({firstname: 'foo', lastname: 'foo'}).

Хитрость заключается в создании нового Person в компоненте.

Я добавил конструктор с объектом для повторного заполнения.

export class Person {
    public id: number = Date.now();
    public firstName!: string;
    public lastName!: string;

    constructor(private obj: any = null) {
        if(obj){Object.assign(this, obj)}
    }

    public greet(): string {
        return `Hello, ${this.firstName}`;
    }
};

Затем в моем компоненте:

new Person(person).greet()