反应，MobX。应用程序状态不会立即更新

Question

我的店铺是这样的

count = 0
increment = () => {
this.count = this.count + 1;
}

还有我的组件，包裹在观察者中

<button onClick = {()=>{
increment()
console.log(count, "after")
}}>{count}</button>

我希望 console.log 行已经有更新后的值。也就是说，count 将等于 1。组件本身更新了，也就是计数值改变了。但是在console.log这一行，计数值先是0，你再按一次，组件里的计数是2，而在console.log是一个

Answer 1

这就是闭包的工作原理，与 MobX 无关。我希望您在代码中有类似的东西：

const {increment, count} = store

return <button onClick = {()=>{
  increment()
  console.log(count, "after")
  }}>{count}</button>

所以在第一次渲染时，你的 onClick 在范围内有 count === 0，当你按下按钮时 increment 增加计数，但 onClick 仍然有旧的值，因为这是它第一次呈现时的值。等等。

中阅读更多内容

使用 MobX，你可以通过不解构存储来克服它，然后你将始终在任何地方都有最新的值：

return <button onClick = {()=>{
  store.increment()
  console.log(store.count, "after")
  }}>{store.count}</button>

React, MobX. The application state is not updated instantly