Mobx状态已更新但UI未同步，Toggle按钮功能异常求助

你的问题核心是没有用observer高阶组件包裹React组件，导致Mobx状态更新后无法触发组件重渲染。

错误点 #

在index.js中，你仅将App组件直接赋值给ObservedApp，未使用observer包装：

const ObservedApp = App; // 错误：未通过observer建立Mobx与组件的响应连接

修复步骤 #

将App组件用observer包裹，Mobx会自动追踪组件内用到的可观察状态（比如bookStore.showPrivateBooks、bookStore.books），当状态变化时触发组件重渲染：

修改后的index.js关键代码：

// ... 其他导入代码不变

function App() {
  // ... 组件原有逻辑保持不变
}

// 用observer高阶组件包裹App
const ObservedApp = observer(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<ObservedApp />, rootElement);

补充说明 #

observer是Mobx-react实现状态与UI同步的核心：它会在组件渲染时收集依赖的可观察状态，当这些状态更新时，自动触发组件重新渲染，确保UI始终和最新状态保持一致。

内容的提问来源于stack exchange，提问作者Omer72