Mobx方法的对象不是函数

Question

我试图通过mobx数组访问方法的objet (此处为greet()方法)，但我仍然坚持：

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。

我添加了一个构造函数，并添加了一个objet来重新填充。

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()