MultiSelect in react native

问题

I am trying to implement the MultiSelect in react native. I have referred from this link " https://github.com/toystars/react-native-multiple-select ". But unfortunately i am not able to view the name in list of the drop down showing " No item to display ".

image: https://i.stack.imgur.com/c11Jx.jpg

For the name to be display in dropdown, data is taken from items prop which should be of the form of javascript array of object. Please help me out to solve this issue.

`import React, {Component} from 'react';
 import { SectionList, Image, StyleSheet, Text, View, ScrollView, ListView, 
 AsyncStorage, Button, TextInput, TouchableOpacity, KeyboardAvoidingView  } 
 from 'react-native';
 import { Constants } from 'expo';
 import ActionButton from 'react-native-action-button';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { StackNavigator } from 'react-navigation';
 import { Ionicons } from '@expo/vector-icons';
 import TextField from 'react-native-md-textinput';
 import MultiSelect from 'react-native-multiple-select'; 

 export default class SendNotification extends Component {

 static navigationOptions = {
  title: 'Send Notification',
 };

constructor (props) {
super(props)
 this.state = {
  arr_user: [],           
 } 
}

componentWillMount() {
 this.getUsers();
};

getUsers = async () => {
 const { page, seed } = this.state;
await fetch('.....api') 
    .then((response) => response.json()) 
    .then((responseJson) => { 

     this.setState({arr_user: responseJson.results});

   }).catch((error) => { console.error(error); });


};

focus () {
 this.textInput && this.textInput.focus()
};  

onSelectedItemsChange = (selectedItems) => {

 console.log(JSON.stringify(selectedItems));
 this.setState({selected_user: JSON.stringify(selectedItems)});
};

render() {

  return (

    <View style={{flex:1, backgroundColor:'#ffffff'}}>

      <ScrollView>

        <MultiSelect
          items={this.state.arr_user}
          uniqueKey="id"
          onSelectedItemsChange={this.onSelectedItemsChange}
          selectedItems={[]}
          selectText="Pick Users"
          searchInputPlaceholderText="Search Users..."
          tagRemoveIconColor="#CCC"
          tagBorderColor="#CCC"
          tagTextColor="#CCC"
          selectedItemTextColor="#CCC"
          selectedItemIconColor="#CCC"
          itemTextColor="#000"
          searchInputStyle={{ color: '#CCC' }}
          submitButtonColor="#CCC"
          submitButtonText="Submit"
        />

        </ScrollView>
    </View>

   );
  } 
} `

回答1:

Aren't you mixing up async / await with the "classic" (fetch) promises syntax? So instead of writing

await fetch(YOUR_API) 
.then((response) => response.json()) 
.then((responseJson) => ...

you should write

... async () => {
   const  { page, seed } = this.state;
      try {
         const response = await fetch('..//api');
         const responseJson = await response.json();
         [DO CONDITIONAL CHECKS IF NEEDED]
         this.setState({ arr_user: responseJson });
      } catch (e) {
         console.log(e);
      }
}

Otherwise you could write your fetch() the more classic way but without the "async/await" Some usefull introduction into async/await was this article to me: 6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

来源：https://stackoverflow.com/questions/46646491/multiselect-in-react-native

标签

reactjs

react-native

dropdown

multi-select