Question

我有一些代码在最初加载或刷新屏幕时应从API重新加载数据。当我使用mobx重新实现时，加载动画停止清除。当我用这两种方法重写代码时，似乎都可以用，但是我不想重复这样的代码。我相信这与绑定有关。这是代码：

@observer
export default class Vehicles extends React.Component {
  @observable client
  @observable loaded = false
  @observable refreshing = false

  @action _loadScreen() {
    this.client = global.store.currentUserStore.user
    this.client.fetchVehicles().then(() => {
      this.loaded = true
      this.refreshing = false
    })
  }

  @action _onRefresh = () => {
    this.loaded = false
    this.refreshing = true

    this._loadScreen()
  }

  render() {
    const { navigation } = this.props
    this.navigation = navigation

    return (
      <SafeAreaView flex={1}>
        <NavigationEvents
          onDidFocus={() => Segment.screen("ScreenViewed")}
          onWillFocus={() => this._loadScreen()}
        />
        <Block flex>
          <Loader loaded={this.loaded}/>

我尝试尝试@action.bound和runInAction无济于事。我觉得我在这里想念一些小东西。我对js还是很陌生（我在15年的职业生涯中只在这里或那里使用过一两行），所以请随时向我学习我显然没有得到的任何概念。

谢谢！

Answer 1

我认为问题出在您的_loadScreen方法中。

即使将其标记为action，由于您使用的是Promise（异步），因此方法的then部分在初始操作（_loadScreen之外运行

then中的代码也应在action中运行。

  import {runInAction} from 'mobx'

  @action _loadScreen() {
    this.client = global.store.currentUserStore.user
    this.client.fetchVehicles().then(() => {
      runInAction(()=>{
        this.loaded = true
        this.refreshing = false
      })

    })
  }

从文档中：Writing asynchronous actions

Mobx操作绑定和状态更改出现问题

1 个答案: