我正在尝试在本机中实现MultiSelect。我已经从这个链接中提到了#34; https://github.com/toystars/react-native-multiple-select"。但不幸的是我 无法在下拉列表中查看名称"没有要显示的项目"。
图片: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>
);
}
} `
答案 0 :(得分:0)
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)