应用程序的状态不会通过 React、MobX 中的 props 在代码中立即更新

Question

如果我有这样的代码

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

然后当你点击按钮时，计数器就会更新，并且计数器已经在控制台中更新了。但是如果你创建一个接受数量和回调的计数器组件，状态将是异步的

<Counter count = {store.count} increment = {store.increment}/>

如何确保控制台中的状态已经更新。如果可能，没有 didUpdate 方法和更新挂钩

codesandbox https://codesandbox.io/s/mobx-counter-example-forked-v3qcrw?file=/src/index.js

Answer 1

首先：不要使用过时的库版本。更新到最新的。

其次：将observableapi改为makeAutoObservable，去掉多余的actions.

第三：将每个使用可观察值的组件包装到 observer HOC 中。在您的示例中，您包装了 Counter，但 Counter 实际上不使用任何可观察值，它仅将 appState.count 作为道具获取，当您引用它时，它将成为原始值。然后你直接把Counter传给ReactDOM.render，那不行。

我用 App 组件包装了它：

const App = observer(() => {
  return <Counter count={appState.count} increment={appState.incCounter} />;
});

这是 Codesandbox 的工作代码

应用程序的状态不会通过 React、MobX 中的 props 在代码中立即更新

The state of the application is not updated instantly in the code via props in React, MobX

state

asynchronous

reactjs

mobx

mobx-react