Question

Mobx是一个经常与React一起使用的状态管理工具。我试图了解MobX工具的工作原理，使用their 'Ten minute introduction to MobX and React' tutorial.我正在使用介绍页面底部提供的Task List JSFiddle example链接。

JSfiddle在首次加载时工作正常。更改一个字节的代码，点击JSfiddle运行按钮，它崩溃了。我试图理解JSFiddle崩溃以及如何解决它。

首次加载时，我会看到控制台警告

VM48 babel.js:60934 You are using the in-browser Babel transformer. 
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/

在JSfiddle中按下运行图标后，我看到以下错误消息

Uncaught ReferenceError: mobxReact is not defined
    at <anonymous>:47:22
    at run (VM48 babel.js:60802)
    at check (VM48 babel.js:60868)
    at loadScripts (VM48 babel.js:60909)
    at runScripts (VM48 babel.js:60936)
    at transformScriptTags (VM48 babel.js:324)

(anonymous) @ Inline Babel script:4

这对我没有意义。如何在首次打开网站时正确运行JSFiddle，但在运行图标后失败？我可以看到MobX-react作为外部参考。任何人都明白这里发生了什么，以及如何纠正JSFiddle（让我真正修改和使用MobX来了解真正发生的事情？）

Answer 1

错误表明您正在尝试使用不作为包存在的mobx库。

未捕获的ReferenceError：未定义mobxReact

要解决此问题，请在HTML文件中添加脚本标记以导入mobx库。

实施例

<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="Mobx Sample">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://npmcdn.com/mobx@2.3.3/lib/mobx.umd.js"></script>
  </body>
</html>

然后在您的JS文件中，您可以导入mobx模块。

const { observable, autorun, computed } = mobx;

JSFiddle Oddness。第一次运行后Mobx失败

1 个答案:

实施例