MultiSelect in react native

Question

我试图在反应本机中实现MultiSelect。我从这个链接提到“https://github.com/toystars/react-native-multiple-select”。但不幸的是，我是 无法查看下拉列表中的名称，显示“No item to display”。

图像：https://i.stack.imgur.com/c11Jx.jpg

对于名称是在下拉显示，将数据从项目采取丙这应该是对象的JavaScript的阵列的形式的。请帮我解决这个问题。

`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> 

    ); 
    } 
} ` 

Answer 1

难道你不是用“classic”（fetch）promises语法混合异步/等待吗？因此，而不是写

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

你应该写

... 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); 
     } 
} 

否则，你可以写你的fetch（）方法比较经典的方式，但没有“异步/等待” 一些有用的引入异步/ AWAIT WAS这篇文章对我来说：6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)