将列表从JSON数据添加到Picker.Item组件中，以响应本机博览会

问题描述

我想将数据添加到从AsyncStorage提取的JSON的组件中。 但结果是一个错误 我编写的以下代码：

constructor(props) {
      super(props);    
      this.state = {
         url: '',}
      this.checkurl();      
    }



checkurl = async () => {    
    
    const urlget = await AsyncStorage.getItem('url');        
    if(urlget) {        
      this.setState({ url: urlget });
    } else {
      console.log('data url empty');
    }
  }


render () {
    const urlListrender = this.state.url.map((item) =>
    <Picker.Item label={item.alias} value={item.url} key={item.id}/>
    );

    return(

        <View>
          <Picker 
              style={styles.pickerText}
              selectedValue={this.state.url}
              onValueChange={(itemValue,itemIndex) => this.setState({url: itemValue})}>              
              {urlListrender}
          </Picker>
       </View>

        )   
}

我犯了什么错误？ 我该如何解决？

解决方法

尝试以下操作。我做了一些更改。

constructor(props) {
      super(props);    
      this.state = {
         url: [],}
    }

componentDidMount(){
  this.checkurl();      
}

checkurl = async () => {    
    
    const urlget = await AsyncStorage.getItem('url');        
    if(urlget) {        
      this.setState({ url: urlget });
    } else {
      console.log('data url empty');
    }
  }


render () {
   if (this.state.url === undefined || this.state.url === null) return null;

   const urlListrender = this.state.url.map((item) =>
    <Picker.Item label={item.alias} value={item.url} key={item.id}/>
    );

    return(

        <View>
          <Picker 
              style={styles.pickerText}
              selectedValue={this.state.url}
              onValueChange={(itemValue,itemIndex) => this.setState({url: itemValue})}>              
              {urlListrender}
          </Picker>
       </View>

        )   
}

,

也许您还没有弄清楚AsyncStorage可以存储的数据类型和用途。我建议您详细阅读正式文件。

当然，还有一个开源库可以帮助您更方便地访问AsyncStorage中的数据。它将有助于数据存储，检索和类型转换。您可以访问AsyncStorage中的任何数据，例如内存对象。

react-native-easy-app