React，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仍然有旧值，因为这是它第一次渲染的时候的值。等等。

你可以在React文档中阅读更多关于它的信息。

有了MobX，你可以通过不破坏商店来克服它，然后你会在任何地方都有最新的值：

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