React Native中Fetch请求后MobX Store未更新问题求助

看起来你遇到的问题主要是几个关键的MobX使用错误导致的，我帮你一步步梳理并修复：

1. 核心错误：fetchData被错误标记为observable #

在你的decorate配置里，你把fetchData设置成了observable，但它本质是一个动作（action）——负责修改状态的方法必须被标记为action，否则MobX无法追踪到状态的更新。

把这一行：

fetchData: observable

改成：

fetchData: action

2. 异步函数内的状态修改需在action上下文里 #

你的fetchData是async函数，在函数开头直接修改this.data = null和this.loading = false的操作，是在非action的上下文里执行的，这会触发MobX的严格模式警告（如果开启的话），也可能导致状态更新不生效。需要把这些修改也放到runInAction里，或者用action包裹整个函数。

另外，你的loading逻辑有点问题：初始loading是true，但你一开始就把它设为false，这不符合加载状态的逻辑——应该是开始请求时保持loading=true，请求完成后才设为false。

3. 完整修正后的代码 #

import { createContext } from 'react'
import { action, decorate, observable, runInAction } from 'mobx'
import mapObjects from '../utils/mapObjects'

export class DataStore {
  data = null
  error = false
  loading = true

  async fetchData(url) {
    // 初始化加载状态
    runInAction(() => {
      this.data = null
      this.error = false
      this.loading = true
    })

    try {
      console.log('TRY')
      const response = await fetch(url)
      const jsonResponse = await response.json()
      const obj = await mapObjects(jsonResponse)

      runInAction(() => {
        console.log('WRITE!!!')
        this.loading = false
        this.data = obj
      })
    } catch (err) {
      runInAction(() => {
        console.log(err)
        this.loading = false
        this.error = err
      })
    }
  }
}

decorate(DataStore, {
  data: observable,
  error: observable,
  loading: observable,
  fetchData: action // 修正为action
})

export default createContext(new DataStore())

额外建议（MobX 6+ 优化） #

如果你使用MobX 6及以上版本，推荐使用makeAutoObservable替代decorate，它会自动推断observable和action，减少手动配置的错误：

import { createContext } from 'react'
import { makeAutoObservable } from 'mobx'
import mapObjects from '../utils/mapObjects'

export class DataStore {
  data = null
  error = false
  loading = true

  constructor() {
    makeAutoObservable(this)
  }

  async fetchData(url) {
    this.data = null
    this.error = false
    this.loading = true

    try {
      console.log('TRY')
      const response = await fetch(url)
      const jsonResponse = await response.json()
      const obj = await mapObjects(jsonResponse)

      this.loading = false
      this.data = obj
    } catch (err) {
      console.log(err)
      this.loading = false
      this.error = err
    }
  }
}

export default createContext(new DataStore())

这样你就不需要手动维护decorate配置了，MobX会自动处理所有状态和动作的绑定，代码更简洁也不容易出错。

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