Как динамически добавлять данные (выпадающий список) из api в react-native-select-dropdown?

#javascript #reactjs #react-native #dropdown

Вопрос:

Я использую react-native-select-dropdown и устанавливаю массив данных статически, но не знаю, как динамически устанавливать массив данных из API с идентификатором

Код :

   const countries = ["Egypt", "Canada", "Australia", "Ireland"]

  <SelectDropdown
  data={countries}
  // defaultValueByIndex={1}
  // defaultValue={'Egypt'}
  onSelect={(selectedItem, index) => {
    console.log(selectedItem, index);
  }}
  defaultButtonText={"Select"}
  buttonTextAfterSelection={(selectedItem, index) => {
    return selectedItem;
  }}
  rowTextForSelection={(item, index) => {
    return item;
  }}
/>

как динамически настраивать список массивов стран, и мне нужны как заголовок, так и идентификатор выбранного элемента, выборка данных из api:

 const countries = [
  {namd: 'Egypt', id: 1},
  {namd: 'Canada', id: 2},
  {namd: 'Australia', id: 3},
  {namd: 'Ireland', id: 4},
];

1. вы должны использовать состояние для обработки динамических изменений данных с повторной визуализацией… например useState , для функциональных компонентов проверьте эту ссылку: https://reactjs.org/docs/hooks-state.html

2. не могли бы вы объяснить на примере

3. Вы можете сопоставить массив, а затем отобразить имя, а также получить идентификатор выбранных данных

4. @JuhiKukreja Если мой ответ помог вам, пожалуйста, примите его.

Ответ №1:

Вот пример из вашего кода в соответствии с вашими требованиями. В раскрывающемся меню ниже кода будут показаны названия стран, и когда вы выберете любое из них, оно напечатает выбранную страну и идентификатор. Вы можете использовать хук useState для управления вызовами API. Я показал вам пример, как вы можете управлять ответом для выпадающего списка.

Вы можете проверить этот пример закуски, который я только что сделал — https://snack.expo.dev/hRpKm2bdg

 const countries = [
  {namd: 'Egypt', id: 1},
  {namd: 'Canada', id: 2},
  {namd: 'Australia', id: 3},
  {namd: 'Ireland', id: 4},
];


export default function App() {
  return (
    <View>
     <SelectDropdown
    data={countries}
    onSelect={(selectedItem, index) => {
        console.log('selected Country name ->>>>',selectedItem.namd)
        console.log('selected Country Id ->>>>',selectedItem.id)
    }}
    buttonTextAfterSelection={(selectedItem, index) => {
        // text represented after item is selected
        // if data array is an array of objects then return selectedItem.property to render after item is selected
        return selectedItem.namd
    }}
    rowTextForSelection={(item, index) => {
        // text represented for each item in dropdown
        // if data array is an array of objects then return item.property to represent item in dropdown
        return item.namd
    }}
     />
    </View>
  );
}