android - 如何在React Native Expo中的Dropdown选项中动态获取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}))}