React Native 中的多选

Question

我正在尝试在 React Native 中实现 MultiSelect。我已从此链接“https://github.com/toystars/react-native-multiple-select”引用。但不幸的是我是 无法查看显示“没有可显示的项目”的下拉列表中的名称。

图片：

对于要在下拉列表中显示的名称，数据是从 items 属性中获取的，它应该是 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

您是不是将 async/await 与“经典”（fetch）promise 语法混淆了？所以不要写

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() 但没有“async/await” 这篇文章对我来说是一些关于 async/await 的有用介绍：JavaScript 的 Async/Await 破坏 Promise 的 6 个原因（教程）