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

【问题标题】：Why does the observer not react on updates in my store?为什么观察者对我商店的更新没有反应？
【发布时间】：2019-12-28 17:08:43
【问题描述】：

我正在尝试让 mobx 与我的 react hooks 一起工作，我从一个非常简单的示例开始，但它仍然不起作用。我一定错过了什么，但我已经尝试了好几个小时才能找到可能是什么。

这是我的商店：

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 中的标签永远不会更新。为什么？

【问题讨论】：

顺便说一句，这个出色的例子很有效，我已经尽我所能模仿它，但有些东西不起作用...codesandbox.io/s/classic-mobx-stores-with-hooks-me334

标签： reactjs react-hooks mobx-react mobx-react-lite

【解决方案1】：

我相信错误在 decorate 中。将行为从使用装饰语法更改为使用 observable 包装 FC 就可以了，如下所示：

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

另一件同样有效的事情是将您的商店作为类并使用像这样的旧装饰器语法：

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

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

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

【讨论】：