Question

我正在尝试让mobx与我的react挂钩一起使用，并且我从一个非常简单的示例开始，但是它仍然无法正常工作。我一定错过了一些东西，但是我已经尝试了好几个小时才能找到可能的东西。

这是我的商店：

import { observable, decorate } from 'mobx';
import { createContext } from 'react';
import { IUser } from '../models/IUser';

export class UserStore {
    public user: IUser;

    public getUser() {
        myApi
            .get(myUrl)
            .then(response => {
                this.user = response;
            });
    }
}

decorate(UserStore, {
    user: observable,
});

export default createContext(new UserStore());

这是打印用户名的组件：

import React, { useContext } from 'react';
import { observer } from 'mobx-react-lite';
import UserStore from '../../stores/UserStore';

const MyComponent = observer(() => {
    const userStore = useContext(UserStore);

    return (
        <div>
            {userStore.user && userStore.user.userName}
        </div>
    );
});

export default MyComponent;

要触发api调用，App会执行以下操作：

const App: React.FC = () => {
    const userStore = useContext(UserStore);

    useEffect(() => {
        userStore.getUser();
    }, []);

    return(...);
};

export default App;

我可以看到 1：应用执行通话 2：将用户设置为呼叫响应 3：如果我在设置好userStore.user.userName之后通过控制台登录，它看起来就很好。

古怪的是MyComponent中的标签永远不会更新。为什么？

Answer 1

我认为该错误位于装饰中。将行为从使用装饰语法更改为使用可观察的包装FC可以很好地完成工作，例如：

const UserStore = observable({
    user: {}
});

另一种可行的方法是将商店作为类，并使用旧的装饰器语法，如下所示：

export class UserStore {
    @observable public user: IUser;
}

这要求您将以下内容添加到.babelrc中：

["@babel/plugin-proposal-decorators", { "legacy": true }]

为什么观察者不对我商店中的更新做出反应？

1 个答案: