从数组响应本机填充选取器内容

Question

我正在使用本地存储(AsyncStorage(..我想显示本地存储中的所有内容到<Picker>..我创建了一个函数..该函数将所有数据作为数组返回..这是我的函数

getElementsInLocalStorage = async () => {
try{    
var x = new Array();
let all_keys = await AsyncStorage.getAllKeys();

for(i = 0; i <= all_keys.length;i++ ){
x[i] = await AsyncStorage.getItem('one_person'+i);
}
return x;
}
catch(error){
alert(error);
}
}

我需要一个使用<Picker>显示结果的解决方案

谢谢。。

Answer 1

你需要做的是将存储的数据设置为你的状态(就像我在componentDidMount中所做的那样(，如果你默认有一个选定的键，只需将其设置为selectedKey状态并将其传递给selectedValue props，然后迭代你的数据。

选择某个项目后，只需将该项目的键设置为您的状态即可。

我为您创建了一个代码片段，可能会有所帮助：

import React, {Component} from 'react';
import {
Picker,
View,
Text,
} from 'react-native';
export default class Home extends Component {
componentDidMount() {
this.setState({
data: {
key1: 'data1',
key2: 'data2',
key3: 'data3'
},
selectedKey: 'key1',
})
}
render() {
return (
<View>
<Picker
selectedValue={this.state.selectedKey}
onValueChange={key => this.setState({selectedKey: key})}>
{
Object.keys(this.state.data).map(key => (
<Picker.Item key={key} label={this.state.data[key]} value={key}/>
))
}
</Picker>
<Text>Selected data: {this.state.selectedKey}</Text>
</View>
)
}
}

您可以使用以下方法获取所选值：

this.state.data[this.state.selectedKey]