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)