javascript - How to fetch API data in Dropdown options in React Native expo Dynamically - Stack Overflow

admin管理员组

文章数量:1405539

I am new to React-Native and having some problems to fetch the API data in the dropdown List. Basically I want to fetch the names from the API and display it in the drop down. For a while I have added to countries. Below is my code for the same. I just want to fetch the name of the employee from the 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:[]
      };
    }
    ponentDidMount(){
    fetch(";)  // **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.itempany.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>
    )}
    }

Any help is appreciated.

I am new to React-Native and having some problems to fetch the API data in the dropdown List. Basically I want to fetch the names from the API and display it in the drop down. For a while I have added to countries. Below is my code for the same. I just want to fetch the name of the employee from the 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:[]
      };
    }
    ponentDidMount(){
    fetch("https://jsonplaceholder.typicode./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.pany.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>
    )}
    }

Any help is appreciated.

• javascript
• android
• ios
• reactjs
• react-native

Share Follow edited Aug 27, 2024 at 9:04 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 26, 2020 at 12:16 Deven NazareDeven Nazare 51866 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You just have to map the objects in your state to match the structure that us required by the dropdown picker.

You can check the code

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

The only line that has to change it the below line

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

本文标签： javascriptHow to fetch API data in Dropdown options in React Native expo DynamicallyStack Overflow