I need to fetch an api and get the these data from one file in React native, I am able to get the data in the file that fetch the api by console.log()
API.js
export const merchastListFetch = [
axios.get('http://myapi.com/API/fetch_all')
.then(function (response) {
// console.log(response.data);
//able to get the data here
return response.data;
})
]
Merchant_list.js
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import MerchantItem from './MerchantItem'
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler'
import { merchant } from '../../models/models'
import SectionHeader from './SectionHeader'
import { H4, P } from '../typography'
import { merchastListFetch } from '../../API/api'
//get the api from the file
export default function MerchantList({navigation}) {
const renderItem = ({item})=> <MerchantItem {...item}/>
console.log({merchastListFetch});
//cannot access the data here
//get the data like this {"merchastListFetch": [{"_U": 0, "_V": 1, "_W": [Object], "_X": null}]}
return (
<View style={styles.sectionContainer}>
{/* <View style={styles.headerContainer}>
<H4 style={styles.textTitle}>Nearby Merchants</H4>
<View style={styles.flexContainer}>
<P style={styles.textDescription}>Pick from here get the fastest delivery</P>
<TouchableOpacity onPress={() => navigation.navigate('MerchantCategoryScreen')}>
<P style={styles.textLink}>See All</P>
</TouchableOpacity>
</View>
</View> */}
<SectionHeader title="Nearby Merchants" description="Pick from here get the fastest delivery" onLinkPress={() => navigation.navigate('MerchantCategoryScreen')}/>
<FlatList
keyExtractor={(item)=>item.merchant_id}
data={merchant}
renderItem={renderItem}
// itemDimension={80}
/>
</View>
)
}
What i expected from the Merchant_list.js is the data like how i get in the API.js
which is format like this
{"status":true,"data":[{"shop_id":"1","merchant_id":"1","area_id":"0","agent_id":"1","business_type_id":"1","business_category_id":"1","bill_type_id":"1","currency_id":"0","status_id":"0","register_name":"Dummy Name","register_no":"123456789","retail_name":"Test Only","description":"TESTING USE","commission":"20.00","gst_no":"12345","coming_soon":"0","is_halal":"0","is_active":"1","delivery_charge":"3.50","remarks":"TESTING USE AGAIN","approved_date":"0000-00-00 00:00:00","deleted":"0","created_date":"2020-10-06 15:02:20","created_by":"1","modified_date":"2020-10-08 09:37:53","modified_by":"1","merchant":"Merchant","shop_image":[{"shop_image_id":"3","shop_id":"1","file":"\/images\/shop\/5af16e1c6554160a79bea005.png","file_size":"65124","file_type":"image\/png","is_default":"1","is_active":"1","deleted":"0","created_date":"2020-10-09 13:21:23","created_by":"0","modified_date":"0000-00-00 00:00:00","modified_by":"0"}]},
I did some reseach online and found out it possibly will be the aysnc and await issue , but i don know how to modified the code .
Any help will be appreciated !
You could save the response in an Array State and then call and modify it where you need it I guess.
Something like this:
async CallApiFunc(){
await fetch("http://myapi.com/API/fetch_all")
.then(res => res.json())
.then(res => {
console.log(JSON.stringify(res))
this.setState({
dataArray: res
})
})
.catch(err => console.log(err))
}
this requires a dataArray:[]
as state.
After that you can show the entrys in a FlatList for example and also modify them like you do with state.
Modify your function as following.
export const merchastListFetch = ()=>{
return axios.get('http://myapi.com/API/fetch_all')
.then(function (response) {
return response.data;
}).catch((error)=>{
console.log(error)
})
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.