Next.js 14 App Router集成MobX后UI不更新问题求助

以下是按优先级排序的关键排查点：

1. 确保组件是Client Component并正确使用observer #

Next.js 14 App Router默认是Server Component，MobX的observer仅在Client Component中生效。必须在组件顶部添加'use client'指令，并用observer包裹组件：

'use client'
import { observer } from 'mobx-react-lite'
import { useStore } from '@/stores'

const MyComponent = observer(() => {
  const store = useStore()
  return <div>{store.count}</div>
})

export default MyComponent

2. 确认Store是全局单例 #

如果每个组件都创建新的Store实例，状态更新不会同步到其他组件。推荐用React Context提供全局唯一的Store：

定义单例Store #

// stores/counterStore.ts
import { makeAutoObservable } from 'mobx'

class CounterStore {
  count = 0

  constructor() {
    makeAutoObservable(this)
  }

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

export const counterStore = new CounterStore()

用Context提供Store #

// stores/StoreProvider.tsx
'use client'
import { createContext, useContext } from 'react'
import { counterStore } from './counterStore'

const StoreContext = createContext({ counterStore })

export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <StoreContext.Provider value={{ counterStore }}>
      {children}
    </StoreContext.Provider>
  )
}

export const useStore = () => useContext(StoreContext)

在根布局中包裹Provider #

// app/layout.tsx
import { StoreProvider } from '@/stores/StoreProvider'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <StoreProvider>{children}</StoreProvider>
      </body>
    </html>
  )
}

3. 检查Store状态是否被标记为可观察 #

如果没有用makeAutoObservable或makeObservable标记状态，MobX无法追踪变化：

// 正确示例
class CounterStore {
  count = 0

  constructor() {
    // 自动标记所有属性为可观察，方法为action
    makeAutoObservable(this)
  }

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

4. 确保状态更新在MobX的action中进行 #

虽然MobX支持自动追踪，但修改状态的逻辑最好放在action中，同时确认this绑定正确（你已解决undefined问题，可再次验证）：

// 箭头函数自动绑定this，且被makeAutoObservable标记为action
increment = () => {
  this.count += 1
}

// 若用普通方法，需手动标记action
constructor() {
  makeObservable(this, {
    count: observable,
    increment: action
  })
}

increment() {
  this.count += 1
}

5. 避免直接替换可观察对象/数组 #

如果状态是对象或数组，不要直接替换整个引用，应修改内部属性：

// 错误示例：直接替换对象
updateData = () => {
  this.data = { name: 'new test' }
}

// 正确示例：修改内部属性
updateData = () => {
  this.data.name = 'new test'
}

// 若需替换整个对象，用observable.box
import { observable } from 'mobx'

class DataStore {
  data = observable.box({ name: 'test' })

  updateData = () => {
    this.data.set({ name: 'new test' })
  }
}

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