如何在 React Native expo 的下拉选项中动态获取 api 数据

Posted 2023-03-12

【中文标题】如何在 React Native expo 的下拉选项中动态获取 api 数据

【英文标题】：How to fetch api data in Dropdown options in React Native expo Dynamically

【发布时间】：2020-06-26 12:16:04

【问题描述】：

我是 React-Native 的新手，在获取下拉列表中的 api 数据时遇到了一些问题。 基本上我想从 API 中获取名称并将其显示在下拉列表中。 有一段时间我已经添加到国家。 下面是我的代码。 我只想从 api 中获取员工的姓名。

import DropDownPicker from 'react-native-dropdown-picker';
export default class ImageScreen extends React.Component   
  static navigationOptions = ( navigation ) => 
    return 
      title: "Source Listing",
      headerStyle: backgroundColor: "#000",
      headerTitleStyle: textAlign: "center",flex: 1
     ;
    ;
    constructor(props) 
     super(props);
     this.state = 
       loading: true,
       dataSource:[]
      ;
    
    componentDidMount()
    fetch("https://jsonplaceholder.typicode.com/users")  // **Api for fetching**
    .then(response => response.json())
    .then((responseJson)=> 
      this.setState(
       loading: false,
       dataSource: responseJson
      )
    )
    .catch(error=>console.log(error)) //to catch the errors if any
    
    FlatListItemSeparator = () => 
    return (
      <View style=
         height: .5,
         width:"100%",
         backgroundColor:"rgba(0,0,0,0.5)",
    
    />
    );
    
    renderItem=(data)=>
    <TouchableOpacity style=styles.list>
    <Text style=styles.lightText>data.item.name</Text>
    <Text style=styles.lightText>data.item.email</Text>
    <Text style=styles.lightText>data.item.company.name</Text></TouchableOpacity>
    render()
     if(this.state.loading)
      return( 
        <View style=styles.loader> 
          <ActivityIndicator size="large" color="#0c9"/>
        </View>
    )
    return(
     <View style=styles.container>
       <ModernHeader title = "Contact us " />





       <DropDownPicker style =  alignItems : "center"
   , justifyContent :"center"
  items=[
        label: data.item.name, value:  data.item.name **Dropdown list option**
    ]
    defaultValue=this.state.country
    containerStyle=height: 50,width:375
   
    style=backgroundColor: '#fafafa',borderWidth: 4,
    borderColor: "#ffa726",
    borderRadius: 6,fontSize: 30
    dropDownStyle=backgroundColor: '#fafafa'
    searchable=true
    searchablePlaceholder="Search..."
    searchableError="Not Found"
    onChangeItem=item => this.setState(
        country: item.value
    ,
    console.log(item.value)
    
    )
  
   
    />

    </View>
    )
    

感谢任何帮助

【参考方案1】：

您只需映射您所在州的对象以匹配下拉选择器所需的结构。

您可以查看代码

<DropDownPicker
            style=
                alignItems: "center"
                , justifyContent: "center"
            
            items=this.state.dataSource.map(item=> (label:item.name,value:item.name))
            defaultValue=this.state.country
            containerStyle= height: 50, width: 375 

            style=
                backgroundColor: '#fafafa', borderWidth: 4,
                borderColor: "#ffa726",
                borderRadius: 6, fontSize: 30
            
            dropDownStyle= backgroundColor: '#fafafa' 
            searchable=true
            searchablePlaceholder="Search..."
            searchableError="Not Found"
            onChangeItem=item => this.setState(
                country: item.value
            ,
                console.log(item.value)
            )
            
        />

唯一需要改变它的行是下面一行

items=this.state.dataSource.map(item=> (label:item.name,value:item.name))

【讨论】：

该死的！非常感谢伙计。现在你能告诉我如何运行从列表中选择名称的函数

在下拉菜单中添加一个 onchange 属性 onChangeItem=item => this.setState( name: item.value ) 类似这样的东西