如何在 react-native-select-dropdown 中从 api 动态添加数据（下拉列表）？

Question

我正在使用 react-native-select-dropdown 并静态设置数据数组，但不知道如何从带有 id 的 apis 动态设置数据数组

代码 ：

  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;
  }}
/>

如何动态设置国家数组列表，我需要所选项目的标题和 ID，从 api 获取的数据是：

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

Answer 1

这是根据您的要求来自您的代码的示例。 在下面的代码下拉菜单中将显示国家/地区名称，当您选择其中任何一个时，它将打印所选的国家/地区和 ID。 您可以使用 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>
  );
}