为什么观察者对我商店的更新没有反应？

Question

我试图让 mobx 与我的反应挂钩一起工作，我从一个非常简单的例子开始，但它仍然不起作用。我一定是错过了什么，但我已经尝试了几个小时才找到可能是什么。

这是我的商店：

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：App执行调用 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 }]

为什么观察者对我商店的更新没有反应？

Why does the observer not react on updates in my store?

reactjs

react-hooks

mobx-react

mobx-react-lite