从端点获取的数据不会填充下拉列表

Question

Why is this not populating a drop down, I followed an example but it still does not populate the drop down as it is supposed to. i get very empty values on the drop down. Normally the data is supposed to be spooled from the endpoint and then populate the data as drop down to be selected by the end user.

The data gotten is like this

{
    "error": false,
    "message": "OK",
    "results": [
        {
            "_id": "63a7c7a2e1d05cc8db72f011",
            "country_name": "Nigeria",
            "symbol": "NG",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        },
        {
            "_id": "63a7c7d7e1d05cc8db72f014",
            "country_name": "Ghana",
            "symbol": "GH",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        },
        {
            "_id": "63a7c838e1d05cc8db72f016",
            "country_name": "Uganda",
            "symbol": "UG",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        },
        {
            "_id": "63a7c84be1d05cc8db72f018",
            "country_name": "Tanzania",
            "symbol": "TZ",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        },
        {
            "_id": "63a7c873e1d05cc8db72f01a",
            "country_name": "South Africa",
            "symbol": "ZA",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        }
    ]
}

My code is looking thus

import {
  ImageBackground,
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {Picker} from '@react-native-picker/picker';
import React, {useEffect, useState} from 'react';
import {useNavigation} from '@react-navigation/native';
import BackgroundOpacity from './BackgroundOpacity';

const InternationalPayments = () => {
  const navigation = useNavigation();
  const [getBanks, setGetBanks] = useState([]);
  const [getCountry, setGetCountry] = useState([]);
  const [bank_name, setBank_name] = useState('');
  const [country_name, setCountry_name] = useState('');
  const [country_symbol, setCountry_symbol] = useState('');
  const [bank_code, setBank_code] = useState('');
  const [selectedCountry, setSelectedCountry] = useState();
  const [selectedBank, setSelectedBank] = useState();
  const [modalVisible, setModalVisible] = useState(false);

  getallCountry = async () =>{
    fetch('https://webserver-migospay.onrender.com/api/location/get-country',{
      method:'GET',
      headers:{
        'Content-type': 'application/json'
      },

    }).then(response => response.json())
      .then(responseJson=>{
        setGetCountry(responseJson.results);
        setCountry_name(responseJson.results.country_name);
        setCountry_symbol(responseJson.results.symbol);
      })
  }

  useEffect(()=>{
    getallCountry();
  })

  return (
    <View style={styles.container}>
      <BackgroundOpacity
        display={Platform.OS === 'ios' ? false : modalVisible}
      />
      <View style={styles.space} />
      <ScrollView
        contentContainerStyle={{
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <ImageBackground
          source={{
            uri: 'asset:/logo/bg.JPG',
          }}
          imageStyle={{borderRadius: 6}}
          style={{
            top: -30,
            paddingTop: 95,
            alignSelf: 'center',
            width: 328,
            height: 115,
            borderadius: 9,
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
          }}>
          <View>
            <Text style={styles.accText}>Wallet Balance</Text>
            <Text style={styles.text}> 250,000 </Text>
          </View>
        </ImageBackground>

        <View
          style={{
            borderRadius: 5,
            borderWidth: 1,
            overflow: 'hidden',
            height: 53,
            padding: 0,
            borderColor: '#00BB23',
          }}>
          {
            <Picker
              style={{
                width: 300,
                height: 55,
                borderBottomWidth: 1,
              }}
              itemStyle={{
                fontSize: 25,
                fontFamily: 'Poppins-Medium',
              }}
              
              selectedValue={selectedCountry}
              onValueChange={(value, index) => setSelectedCountry(value)}
              >
              <Picker.Item label="Select Country" />
              {getCountry.map((country,index)=>{ //<=== this is supposed to be where it should populate, but it does not populate it. No idea why.
                <Picker.Item label={country.country_name} value={country.symbol} key={index} />
              })}
            </Picker>
          }
        </View>
        
        <View style={styles.space}/>
        <View
          style={{
            borderRadius: 5,
            borderWidth: 1,
            overflow: 'hidden',
            height: 53,
            padding: 0,
            borderColor: '#00BB23',
          }}>
          {
            <Picker
              style={{
                width: 300,
                height: 55,
                borderBottomWidth: 1,
              }}
              itemStyle={{
                fontSize: 25,
                fontFamily: 'Poppins-Medium',
              }}>
              <Picker.Item label="Select Bank" value="accNum" />
            </Picker>
          }
        </View>
        
        <View style={styles.space2}/>
        <TextInput
          placeholder="Destination Account"
          onChangeText={creditAccount => this.setState({creditAccount})}
          style={styles.input}
        />

        <TextInput
          placeholder=" Amount"
          onChangeText={amount => this.setState({amount})}
          style={styles.input}
        />

        <TextInput
          placeholder=" Narration"
          onChangeText={description => this.setState({description})}
          style={styles.input}
        />

        <TextInput
          placeholder=" Destination Branch Code"
          onChangeText={description => this.setState({description})}
          style={styles.input}
        />

        <TextInput
          placeholder=" Beneficiary Name"
          onChangeText={description => this.setState({description})}
          style={styles.input}
        />

        <View
          style={{
            borderRadius: 5,
            borderWidth: 1,
            overflow: 'hidden',
            height: 35,
            padding: 0,
            top: 10,
            borderColor: '#00BB23',
          }}>
          {
            <Picker
              style={{
                width: 300,
                height: 53,
                borderBottomWidth: 1,
              }}
              itemStyle={{
                fontSize: 25,
                fontFamily: 'Poppins-Medium',
              }}>
              <Picker.Item label="Currency" value="accNum" />
              <Picker.Item label="NGN" value="NGN" />
            </Picker>
          }
        </View>

        <TouchableOpacity
          onPress={() => {
            setModalVisible(true);
          }}
          style={styles.button}>
          <Text style={styles.loginbtn}> Transfer </Text>
        </TouchableOpacity>
        <Modal
          hasBackdrop={true}
          backdropOpacity={0.2}
          backdropColor="black"
          transparent
          visible={modalVisible}
          onRequestClose={() => setModalVisible(false)}>
          <View style={styles.modal}>
            <Text>Hello From Modal</Text>
            <TouchableOpacity>
              <Text>Modal! Modal!</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </ScrollView>
    </View>
  );
};

export default InternationalPayments;

const styles = StyleSheet.create({
  container: {
    paddingTop: 40,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },

  modal: {
    top: '50%',
    height: '50%',
    backgroundColor: '#fff',
  },
  accText: {
    top: -50,
    paddingTop: 10,
    justifyContent: 'center',
    alignItems: 'center',
    fontFamily: 'Poppins-Medium',
    fontSize: 12,
    color: 'white',
    textAlign: 'center',
  },
  text: {
    top: -50,
    fontSize: 20,
    color: 'white',
    textAlign: 'center',
    fontFamily: 'Poppins-Bold',
  },
  input: {
    top: 10,
    width: 300,
    height: 53,
    margin: 10,
    fontSize: 12,
    borderColor: '#00BB23',
    fontFamily: 'Poppins-Bold',
    borderRadius: 5,
    borderWidth: 1,
    marginBottom: 30,
  },

  button: {
    marginTop: 40,
    width: 150,
    height: 50,
    padding: 10,
    borderRadius: 10,
    backgroundColor: '#00BB23',
    alignItems: 'center',
  },

  Regbutton: {
    width: 150,
    height: 52,
    padding: 10,
    borderRadius: 10,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: '#030303',
  },

  loginbtn: {
    color: '#ffff',
    fontSize: 15,
    fontFamily: 'Poppins-Medium',
  },

  AccountBalance: {
    fontSize: 13,
    fontWeight: 'bold',
    textAlign: 'left',
  },

  loginbtn2: {
    color: '#030303',
    fontSize: 20,
    fontWeight: 'bold',
  },

  logo: {
    width: 150,
    height: 150,
  },

  space: {
    top: 10,
    width: 10,
    height: 20,
  },

  space2: {
    width: 10,
    height: 10,
  },

  imageStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 5,
    margin: 2,
    height: 15,
    width: 15,
    resizeMode: 'stretch',
    marginBottom: 8,
    marginTop: 8,
    alignItems: 'center',
  },
});

Answer 1

Merry Christmas. Hope that Santa brings you lots of presents. You've been a good coder this year.