Question

我正在尝试在本机中实现MultiSelect。我已经从这个链接中提到了＃34; https://github.com/toystars/react-native-multiple-select＆＃34;。但不幸的是我无法在下拉列表中查看名称＆＃34;没有要显示的项目＆＃34;。

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

对于要在下拉列表中显示的名称，数据来自项目prop，其应该是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

Aren你把async / await与＆＃34; classic＆＃34;混合起来（fetch）承诺语法？所以不要写

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（），但没有＆＃34; async / await＆＃34; 本文给我的一些有用的async / await简介：6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

MultiSelect in native native

1 个答案: