如何动态获取React Native博览会中下拉选项中的API数据

Question

我是 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>
    )}
    }

如有任何帮助，我们将不胜感激。

Answer 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}))}