Javascript 我能'；我不明白为什么输入没有使用MobX更新

因此，我尝试将MobX与react一起使用，但我不明白为什么输入没有更新其值

这是我迄今为止编写的代码：

@observer(['recipeStore'])
class App extends Component {
  render() {
    return (
      <input type="text" value={this.props.recipeStore.og} onChange={(e) => {this.props.recipeStore.og = e.target.value}}/>
    );
  }
}

class RecipeStore {
  @observable og;
  @observable style;

  constructor() {
    this.og = 1;
    this.style = {og_low: 1, og_high: 1, fg_low: 1, fg_high: 1, abv_low: 1, abv_high: 1};
  }

  @computed get fg() {
    if (!this.og) return '';
    return (((this.og - 1) * 0.25) + 1).toFixed(3);
  }

  @computed get abv() {
    if (!this.og) return '';
    return ((this.og - this.fg) * 131).toFixed(1);
  }
}

const recipeStore = new RecipeStore();

ReactDOM.render(
  <Provider recipeStore={recipeStore}>
    <App />
  </Provider>,
  document.getElementById('root')
);

@observer（['recipeStore']）
类应用程序扩展组件{
render（）{
返回(
{this.props.recipeStore.og=e.target.value}}/>
);
}
}
类食谱商店{
@可观测og；
@可观察的风格；
构造函数（）{
这1.og=1；
this.style={og_low:1，og_high:1，fg_low:1，fg_high:1，abv_low:1，abv_high:1}；
}
@计算得到fg（）{
如果（！this.og）返回“”；
返回（（（this.og-1）*0.25）+1.toFixed（3）；
}
@计算得到abv（）{
如果（！this.og）返回“”；
返回（（this.og-this.fg）*131）.toFixed（1）；
}
}
const recipeStore=新配方存储（）；
ReactDOM.render(
,
document.getElementById（'root'））
);

我找到了解决方案。因为我看到我的商店正在更新，但没有触发任何react组件生命周期，所以我不得不去其他地方看看

原来问题是

@observer

装饰程序工作不正常

我必须更改我的

babel.dev.js

，以确保插件

“babel-plugin-transform-decorators-legacy”

是列表中的第一个

---

我在这里找到了提示：

。在控制台中写入

recipeStore.og

，您将看到该值已更新。尝试显示问题中的所有相关代码，而不是链接到外部资源。稍后我将查看代码并尝试查找问题。谢谢我对代码进行了重构，使其尽可能少，就像您在JS bin中所做的那样，我可以确认RecipeStore正在接收更新，但是在onChange事件之后，React组件生命周期没有被触发。即使shouldComponentUpdate也不会运行。这很奇怪。shouldComponentUpdate不会为MobX计划的更新运行，因为它不允许您取消更新并引入不一致的组件。（它将运行道具更改和设置状态调用）