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属性，然后遍历您的数据。

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

我为您创建了一个代码段，对您有所帮助：

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]

从数组反应本机填充选择器内容

1 个答案: