如何将api数据与Section List react native集成

Question

我正在尝试将一个api与react native中的section list集成，就像现在在JSON中一样，我的终点是：id、quantity、token、txnFee、txnFeeToken、status、transactionType、createdAt、title。如何在部分列表中添加这个端点来集成api。请帮助我如何添加这些数据并从api中提取，以便它可以呈现到部分列表中

export const data = [
{
title: 'Today',
key: 'today',
data: [
{
iconUrl: '',
primaryKey: 'pay to dbm',
primaryLabel: '21,200',
secondaryKey: '7:30 PM',
secondaryLabel: 'USDT'
},
]
},
{
title: 'Yesterday',
key: 'yesterday',
data: [
{
iconUrl: '',
primaryKey: 'pay to xyz',
primaryLabel: '21,200',
secondaryKey: '7:30 PM',
secondaryLabel: 'USDT'
},
]
},
{
title: '14 DEC 2022',
key: '14 dec 2022',
data: [
{
iconUrl: '',
primaryKey: 'pay to xyz',
primaryLabel: '21,200',
secondaryKey: '7:30 PM',
secondaryLabel: 'USDT'
},
]
}
];

const handleRenderSectionItem = ({ item, section }) => {
const { iconUrl, primaryKey, primaryLabel, secondaryKey, secondaryLabel } = item;
return (
<RowComponent 
onPress={() => {}}
iconUri={iconUrl}
primaryKey={primaryKey}
primaryLabel={primaryLabel}
secondaryKey={secondaryKey}
secondaryLabel={secondaryLabel}
/>
)
}
const handleRenderSectionHeader = ({ section: { title }}) => (
<Text
marginVertical={15}
>{title}</Text>
);
return (
<View>
<SectionList 
sections={data}
keyExtractor={({ item }) => item?.primaryKey}
renderItem={handleRenderSectionItem}
renderSectionHeader={handleRenderSectionHeader}
stickySectionHeadersEnabled={false}
/>
</View>
)

Answer 1

您可以使用axios。这是获取和发布操作的文档https://axios-http.com/docs/api_intro

这里有一个演示代码，满足您的需求。

import axios from 'axios';
axios({
method: "get",
url: `${BaseUrl}/endpoint`, // endpoint of Url
headers: { 
'Authorization': `Bearer ${token}` // this format is for bearer token
},
})
.then((res)=>{
setData(res.data)
})
.catch((e)=>{ console.log(e.response)})