如何动态添加数据(下拉列表)从api在react-native-select-dropdown? &g

Question

我使用react-native-select-dropdown静态设置数据数组，但不知道如何从id

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

如何设置国家数组列表动态和我需要的标题和选定项目的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>
);
}