时间戳

首页 > 解决方案 > 从数组反应本机填充选择器内容

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

问题描述

我正在使用本地存储（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>

谢谢你..

标签： react-nativepicker

解决方案

您需要做的是将存储的数据设置为您的状态（就像我在 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]

推荐阅读