如何将 api 数据与部分列表 react-native 集成？

Question

我正在尝试将 api 与部分列表集成到 react native 中，因为它现在位于 JSON 中，我的终点是：id，数量，令牌，txnFee，txnFeeToken，状态，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)})