Javascript 使用mobx React-lite和React-hook在React-Native中获取函数

我是mobx react的新手，我需要编写获取函数，从API获取数据，并在将数据呈现到FlatList后执行。我已经创建了fetch函数，用useContext钩子设置了初始状态，并用observer mobx类包装了我的应用程序。但是现在我需要实现从服务器获取数据的方法。你能告诉我哪种方法最好吗

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

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

  get getData(){
    return this.data
  }

  get getError(){
    return this.error
  }

  get getLoading(){
    return this.loading
  }

  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)
      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
})

export default createContext(new DataStore())

我的组成部分：

import React, { useContext, useEffect, useState } from 'react'

import { ActivityIndicator, FlatList, Platform, StyleSheet, View } from 'react-native'
import DataStore from '../mobx/DataStore'
import { autorun } from 'mobx'
import { ChartsHeader, CryptoItem, IconsHeader, ProjectStatusBar } from '../components'
import { useFetch } from '../hooks/useFetch'
import { WP, HP } from '../constants'

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})
const ChartsScreen = ({ navigation }) => {
  const { container } = styles
  const store = useContext(DataStore)
  const url = 'https://poloniex.com/public?command=returnTicker'

  console.log('store', store)
  useEffect(() => {
    store.fetchData(url)
  }, [])
  //*Call custom hook and data distruction
  //const { data, error, loading } = useFetch(url)

  //*Change percent amount color depends on the amount
  const percentColorHandler = number => {
    return number >= 0 ? true : false
  }

  return (
    <View style={container}>
      {Platform.OS === 'ios' && <ProjectStatusBar />}
      <IconsHeader
        dataError={store.error}
        header="Charts"
        leftIconName="ios-arrow-back"
        leftIconPress={() => navigation.navigate('Welcome')}
      />
      <ChartsHeader />
      <ActivityIndicator animating={store.loading} color="#068485" style={{ top: HP('30%') }} size="small" />
      <FlatList
        data={store.data}
        keyExtractor={item => item.key}
        renderItem={({ item }) => (
          <CryptoItem
            name={item.key}
            highBid={item.highestBid}
            lastBid={item.last}
            percent={item.percentChange}
            percentColor={percentColorHandler(item.percentChange)}
          />
        )}
      />
    </View>
  )
}

export { ChartsScreen }

---

对于仍在寻找React with MobX中fetch函数方法的所有人。我查阅了很多信息，但没有找到一个好的决定。但最后我创造了我的。也许这会对某人有所帮助： MobX商店：

import { action, observable, runInAction } from 'mobx'

class DataStore {
  @observable data = null
  @observable error = false
  @observable fetchInterval = null
  @observable loading = false

  //*Make request to API
  @action.bound
  fetchInitData() {
    const response = fetch('https://poloniex.com/public?command=returnTicker')
    return response
  }

  //*Parse data from API
  @action.bound
  jsonData(data) {
    const res = data.json()
    return res
  }

  //*Get objects key and push it to every object
  @action.bound
  mapObjects(obj) {
    const res = Object.keys(obj).map(key => {
      let newData = obj[key]
      newData.key = key
      return newData
    })
    return res
  }

  //*Main bound function that wrap all fetch flow function
  @action.bound
  async fetchData() {
    try {
      runInAction(() => {
        this.error = false
        this.loading = true
      })
      const response = await this.fetchInitData()
      const json = await this.jsonData(response)
      const map = await this.mapObjects(json)
      const run = await runInAction(() => {
        this.loading = false
        this.data = map
      })
    } catch (err) {
      console.log(err)
      runInAction(() => {
        this.loading = false
        this.error = err
      })
    }
  }

  //*Call reset of MobX state
  @action.bound
  resetState() {
    runInAction(() => {
      this.data = null
      this.fetchInterval = null
      this.error = false
      this.loading = true
    })
  }

  //*Call main fetch function with repeat every 5 seconds
  //*when the component is mounting
  @action.bound
  initInterval() {
    if (!this.fetchInterval) {
      this.fetchData()
      this.fetchInterval = setInterval(() => this.fetchData(), 5000)
    }
  }

  //*Call reset time interval & state
  //*when the component is unmounting
  @action.bound
  resetInterval() {
    if (this.fetchInterval) {
      clearTimeout(this.fetchInterval)
      this.resetState()
    }
  }
}

const store = new DataStore()
export default store

---

请提供组件的完整源代码，因为很难理解这篇摘录中的内容。请检查，我更改了代码。目前它正在工作，但是有一个非常奇怪的行为：useffect->start loading data->数据必须在组件中呈现，但是它没有发生，只有当我更改导航堆栈时数据才出现。这意味着我按下按钮来更改屏幕，然后数据在上一个屏幕上呈现。在MobX中，我在change state中解决了这个问题。你知道为什么吗？