如何从数组中填充选择器反应本机

Question

我想从数组中填充一个选择器项目.. 这个数组存储来自本地存储的数据，我想在选择器上显示这个数据

这是我从本地存储中检索数据的函数

async getElementsInLocalStorage() {
 try{    
    let x = [];
    let all_keys = await AsyncStorage.getAllKeys();

    for(i = 1; i <= all_keys.length;i++ ){
        let converter =  JSON.parse(await AsyncStorage.getItem('one_person'+i));
        x[i] = converter.first_name + ' ' + converter.last_name;                  
    }

    this.setState({all_options: x, data: x,});
 } catch(error){
   alert(error)
 }
}

这是我的构造函数

constructor(){
    super();   
    this.state = {
        first_name: '',
        last_name : '',
        all_options : [],    
    };
    data = [];
}

这是我的选择器

 <Picker selectedValue = {this.state.selected} >
       {this.state.data.map((value)=><Picker.Item label={value} value={value}/>)} 
 </Picker>

当输入data 时只在选择器选择器未填充但输入this.state.data this is error return

Answer 1

您已在构造函数中将data 定义为单独的变量。但在获取数据后，您将 data 视为状态变量。

只需在状态内声明data，这可能会解决您的问题。

constructor(){
    super();   
    this.state = {
      first_name: '',
      last_name : '',
      all_options : [],   
      data:[] 
    };
}

Answer 2

你可以试试这个。我做的是

在状态内移动数据并在执行 .map 之前添加条件检查

constructor(){
    super();   
    this.state = {
        first_name: '',
        last_name : '',
        all_options : [], 
        data = []
    };
}

这是我的选择器

<Picker selectedValue = {this.state.selected} >
       {this.state.data && this.state.data.map(value=> (<Picker.Item label={value} value={value}/>))} 
 </Picker>