React Native-Mobx无法在操作返回的组件上加载数组

如何解决React Native-Mobx无法在操作返回的组件上加载数组

我正在尝试在应用程序加载到ItemStore时加载产品数据库。然后，我将查询javascript以从该数组中获取一些产品。我的过滤器功能等正在按预期方式工作。

但是在主页上，我试图加载某些类别，因此我必须在ItemStore上调用action方法并将该产品数组传递给react组件。

HomePage.js

@inject('ItemStore')
@observer
export default class HomeScreen extends Component {
  constructor(props) {
     super(props);
  }

  render() {
    const { ItemStore } = this.props;
    return (
     <SafeAreaView>
  <ScrollView>
    <Image
    resizeMode={'contain'}
    style={{width:'100%',height :100}}
      source={require('../../assets/images/logo.png')}
    />
    <Slider 
        photoUrls = {["imgurl1","imgurl2","imgurl3"]} 
        photoTexts = {["first","sec","th"]}
      />
    <CategoryPreview categoryName={"Sample Category 1"} itemList={ItemStore.getItemByCategory("category-value1")}/>
    <CategoryPreview categoryName={"Sample Category 2"} itemList={ItemStore.getItemByCategory("category-value2")}/>
    <SpecialList />
  </ScrollView>
  </SafeAreaView>
);
}}

ItemStore.js

import {observable,action,runInAction,configure} from 'mobx';
import {getItemList} from '../api';
class ItemStore {
   @observable itemDatabase = [];
   @observable error = "";
   @observable loading = false;

@action searchItem (v) {
    // düzgün sayılabilir
    console.log('Value to search :' + v)
    const result = this.itemDatabase.filter(i => i.urunadi.toLowerCase().indexOf(v.toLowerCase()) > -1);
    console.log(result.length)
    return result
}

@action getItemDatabase () {
    return this.itemDatabase;
}

@action getItemDatabaseLength () {
    return this.itemDatabase.length;
}

@action.bound async loadItemDatabase () {
    try {
        const r = await getItemList()
        runInAction(() => {
        this.itemDatabase = r
        console.log(`Item database updated with ${r.length} items.`)
        })
    } catch (e) {
        this.error = "Error at loading item database."
        console.log(e)
    }
}

@action.bound getItemByCategory(c) {
    const result = this.itemDatabase.filter(i => i.kategori.indexOf(c) > -1);
    console.log(`Requested category : ${c}`)
    console.log(`Total Item Count : ${this.itemDatabase.length}`)
    console.log(result.length)
    return result
  }
 }
 export default new ItemStore();

Api.js

import axios from 'axios';
const server = "http://APISERVER:8080/"
async function getItemList() {
    try {
        const { data : {Data} } = await axios.get(server + "api/v2/products")
        return Data
    } catch (e) {
        console.log("error at getItemList")
        console.log(e)
    }
}
async function getCategoryList() {
    try {
        const { data : {Data} } = await axios.get(server + "api/v2/categories")
        return Data
    } catch (e) {
        console.log("error at getCategoryList")
        console.log(e)
    }
}
export {getItemList,getCategoryList}

如果有什么方法可以更有效，请告诉我。

我的目标是将api中的所有项目加载到本地商店，并在我的页面和组件中全部使用。有时它可以工作，但是当我首先启动应用程序时，它将无法正常工作，我必须刷新应用程序以使其运行。有没有实现该目标的好方法。

谢谢