我如何獲取從另一個組件返回的數據 react js

Question

我需要獲取一個 api 並從 React Native 的一個文件中獲取這些數據，我可以通過 console.log() 獲取獲取 api 的文件中的數據

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

我對 Merchant_list.js 的期望是像我在 API.js 中獲得的數據

這是這樣的格式

{"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"}]},

我在網上做了一些研究，發現它可能是 aysnc 和 await 問題，但我不知道如何修改代碼。

任何幫助將不勝感激 ！

Answer 1

你可以將響應保存在一個數組狀態中，然后在你需要的地方調用和修改它，我猜。

像這樣的東西：

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

這需要一個dataArray:[]作為狀態。

之后，您可以在 FlatList 中顯示條目，也可以像處理狀態一樣修改它們。

Answer 2

修改你的函數如下。

export  const  merchastListFetch = ()=>{ 
return axios.get('http://myapi.com/API/fetch_all')
    .then(function (response) {
          return response.data;
    }).catch((error)=>{
        console.log(error)
    })
}