create-react-app添加@observer报错的解决办法

﹏ヽ暗。殇╰゛Y 2022-10-11 12:24 119阅读 0赞

![20210630170659624.png][]第一次使用这个，大概看了下文档，应该是和vue 的 vuex差不多的东西，然后使用的时候报错，意思就是装饰器不可用，然后开始找方法，试了很多种，不知道到底是哪个生效了，但还是记录一下。

第一步，先安装

npm install mobx --save

npm install mobx-react --save

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

还是报错，疯狂百度，不得已使用了 npm run eject ，这个命令会复制所有的依赖文件和相应的依赖（webpack，babel等）到你的项目。这是个单向操作，且不可逆。

npm run eject

这一步之后没看到项目有变化，也可能没成功，也可能变化了我没看到

然后又跟着网上的教程，改了这里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

isTypeScriptEnabled && [
        require('@babel/plugin-proposal-decorators').default,
        { legacy: true },
    ],

没啥反应，还是报错，重启，还是报错，后面又改成 false ，还报错，然后又改成 \{ legacy: true \}，又重启，就好了，再后面，我想找找原因，看到底是哪一步改好的，就又改成了false，然后也运行成功了，怪哉怪哉，**希望哪位大佬看到可以指导我一下**，哈哈哈哈哈

### 最终呈现的效果，这个 标题 ，就是通过Mobx存储的状态 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

[https://cn.mobx.js.org/官方文档戳这里][https_cn.mobx.js.org]

1.  项目就是直接 create-react-app 新建的，这里就简单写一下吧，没什么技术含量的
2.  在src文件夹里面新建 js 文件
    
        import {observable} from 'mobx'
        class Todo {
            id = Math.random();
            @observable title = "标题";
            @observable finished = false;
        }
        export default new Todo();
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3][]
3.  页面中直接调用![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 4][]

[20210630170659624.png]: /images/20221005/3bad4dc0c47a4db09601f648aab3e510.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20221005/e166bd01c3844ddfbb899a751b99f0e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20221005/40007318d1464708a14fa29ea422b30e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: /images/20221005/46942e4be43841c29b728ac1827d524e.png
[https_cn.mobx.js.org]: https://cn.mobx.js.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3]: /images/20221005/c8ea21762d8c46599a3acb6b0eb660d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 4]: /images/20221005/a0a010dc6b114486b0aa3f618f2b7522.png