Как получить данные с помощью axiox.get () из пользовательского интерфейса Swagger и отобразить их в раскрывающемся списке с возможностью поиска?

Question

Я новичок, чтобы реагировать на родных. Я хочу получить данные: пользователь с помощью ax ios .get () и отобразить его в раскрывающемся списке. Swagger UI http://api.myslambook.in/swagger/# / , откуда я получаю данные, имеет имя пользователя и пароль. Мой код не отображает данные в раскрывающемся списке. И я получаю сообщение об ошибке:

ReferenceError: Can't find variable: btoa

Во-первых, возможно, я не могу правильно указать имя пользователя и пароль. Во-вторых, возможно, неверный URL в ax ios .get (). Может кто-нибудь сказать мне правильный способ сделать это. Спасибо

Мой код:

import React, { useState, useEffect, Component, Fragment } from 'react';
import { Block } from 'galio-framework';
import * as theme from '@utils/theme';
import { StyleSheet, TextInput, TouchableOpacity, Image, Alert } from 'react-native';
import { Text } from '../../components/common';
import selectn from 'selectn';
import axios from 'axios';
import SearchableDropdown from 'react-native-searchable-dropdown';

export function FriendRequests ( ) {

const username = 'abcd';
const profilepic = require('../../assets/avatar-placeholder.jpg');


itemSelected = () => {
    console.log('item selected');
}

state = {
    serverData: [],
};

const config = {
    auth: {
        username: 'xxxxx',
        password: 'xxxxxxx',
    },
};

axios.get('http://api.myslambook.in/users/', config)
.then(res => {
    const serverData = res.data;

    this.setState({ serverData });
  })
  .catch(error => {
    console.error(error);
  });

return (
    <Block>
        <Block card shadow style={styles.container}>
            <Block row space="between">
                <Block row>
                    <Text>SEARCH FRIEND</Text>
                </Block>
            </Block>
            <Block style={{ paddingVertical: 9 }}>
                <Fragment>
                <SearchableDropdown
                    onItemSelect={this.itemSelected}
                    containerStyle={{ padding: 5 }}

                    itemStyle={{
                    padding: 10,
                    marginTop: 2,
                    backgroundColor: '#ddd',
                    borderColor: '#bbb',
                    borderWidth: 1,
                    borderRadius: 5,
                    }}
                    itemTextStyle={{ color: '#222' }}
                    itemsContainerStyle={{ maxHeight: 140 }}
                    items={this.state.serverData}
                    defaultIndex={2}
                    resetValue={false}
                    textInputProps={
                    {
                        placeholder: "placeholder",
                        underlineColorAndroid: "transparent",
                        style: {
                            padding: 12,
                            borderWidth: 1,
                            borderColor: '#ccc',
                            borderRadius: 5,
                        }
                    }
                    }
                    listProps={
                    {
                        nestedScrollEnabled: true,
                    }
                    }
                />
                </Fragment>
            </Block>
            <Block row space="between">
                <Block row></Block>
                <TouchableOpacity style={{ paddingHorizontal: theme.SIZES.BASE * 0.5 }}>
                    <Text size={12} >Add Friend</Text>
                </TouchableOpacity>
            </Block>
        </Block>
        <Block row>
            <Text style={styles.request}>REQUESTS</Text>
        </Block>
        <Block card shadow style={styles.container}>
            <Block row space="between" style={[styles.header]}>
                <Block flex={0.2} style={{ marginRight: 10 }}>
                    { <Image source={profilepic} style={styles.avatar}></Image> }
                </Block>
                <Block flex={1.0}>
                    <TouchableOpacity style={styles.title}>
                        <Text style={{ textTransform: 'capitalize' }}>
                            {username}
                        </Text>
                    </TouchableOpacity>
                </Block>
                <Block flex={0.4}>
                    <TouchableOpacity style={{ paddingHorizontal: theme.SIZES.BASE * 0.5 }}>
                        <Text size={12}>Accept</Text>
                    </TouchableOpacity>
                </Block>
                <Block flex={0.4}>
                    <TouchableOpacity  style={{ paddingHorizontal: theme.SIZES.BASE * 0.5 }}>
                        <Text size={12}>Decline</Text>
                    </TouchableOpacity>
                </Block>
            </Block>
        </Block>
    </Block>
)
}

const styles = StyleSheet.create({
avatar: {
    width: theme.SIZES.CARD_AVATAR_WIDTH * 0.8,
    height: theme.SIZES.CARD_AVATAR_HEIGHT * 0.8,
    borderRadius: theme.SIZES.CARD_AVATAR_RADIUS,
    backgroundColor: theme.COLORS.BACKGROUND
},
container: {
    borderWidth: 0,
    backgroundColor: 'white',
    elevation: 3,
    padding: theme.SIZES.BASE * 0.75,
    marginLeft: 10,
    marginRight: 10,
    marginTop: 15
},
request: {
    marginTop: 10,
    marginLeft: 10
},
header: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: theme.COLORS.TRANSPARENT
},
title: {
    justifyContent: 'center',
}
})