在React Native中使用MultiSelect [英] MultiSelect in react native

问题描述

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

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 ".

图片: https://i.stack.imgur.com/c11Jx.jpg

对于要在下拉列表中显示的名称，数据取自道具prop，该道具的形式应为对象的javascript数组.请帮我解决这个问题.

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>

   );
  } 
} `

推荐答案

您不是将异步"/等待"与经典"(获取)promise语法混淆了吗?所以不用写

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) => ...

您应该写

... 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的异步/等待失败的6个原因(教程)

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)

这篇关于在React Native中使用MultiSelect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！