Mobx 方法的对象不是函数

Question

我正在尝试通过 mobx 数组访问方法的对象（此处为 greet() 方法），但我坚持使用：

TypeError: person.greet is not a function

人class

我有一个人 class，使用 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

问题出在库 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()

Mobx 方法的对象不是函数

Mobx method's object is not a function

mobx

mobx-react