Mobx 方法的对象不是函数答案

【问题标题】：Mobx method's object is not a functionMobx 方法的对象不是函数
【发布时间】：2026-01-26 10:00:02
【问题描述】：

我正在尝试通过 mobx 数组访问方法的对象（此处为 greet() 方法），但我被卡住了：

TypeError: person.greet 不是函数

人物类

我有一个 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_));

然后在我的PeoplePagecomponent 中，当我在做类似的事情时：

personList[0].greet()

我收到了错误。

【问题讨论】：

mmmmh，我认为这来自“mobx-persist”库。 @persist('list')

标签： mobx mobx-react

【解决方案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()

【讨论】：