问题描述
我正在尝试在应用程序加载到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中的所有项目加载到本地商店,并在我的页面和组件中全部使用。有时它可以工作,但是当我首先启动应用程序时,它将无法正常工作,我必须刷新应用程序以使其运行。有没有实现该目标的好方法。
谢谢
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)