从JSON数据向Picker.Item组件添加列表

我想向从异步存储中提取的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>

        )   
}

构造函数（道具）{
超级（道具）；
此.state={
url:“”，
}
this.checkurl（）；
}
checkurl=async（）=>{
const urlget=await AsyncStorage.getItem（'url'）；
如果（urlget）{
this.setState（{url:urlget}）；
}否则{
log（“数据url为空”）；
}
}
渲染（）{
const urlListrender=this.state.url.map（（项）=>
);
返回(
this.setState（{url:itemValue}）}>
{urlListrender}
)   
}

我犯了什么错误？

---

如何修复它？

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

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>

        )   
}

构造函数（道具）{
超级（道具）；
此.state={
url:[]，
}
}
componentDidMount（）{
this.checkurl（）；
}
checkurl=async（）=>{
const urlget=await AsyncStorage.getItem（'url'）；
如果（urlget）{
this.setState（{url:urlget}）；
}否则{
log（“数据url为空”）；
}
}
渲染（）{
if（this.state.url==undefined | | this.state.url==null）返回null；
const urlListrender=this.state.url.map（（项）=>
);
返回(
this.setState（{url:itemValue}）}>
{urlListrender}
)   
}

也许您还没有弄清楚AsyncStorage可以存储的数据类型和用法。我建议你仔细阅读官方文件

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

---

错误消息如下所示：TypeError:undefined不是一个函数（靠近“…this.state.url.map…”）检查是否（this.state.url！==undefined）而不是this.state.url.length==0，但我认为问题在于asynstorage中没有任何内容。获取数据后尝试控制台日志记录，以查看是否确实存在数据。这是我添加console.log（“url登录：”，urlget）时的结果；AsyncStorage.getItem（'url'）：[{“url”：“192.168.2.100:3000”，“别名”：“test”}，{“url”：“111.222.3.444:5555”，“别名”：“prod”}]更新代码后，仍然会出现相同的错误：TypeError:undefined不是函数（靠近“…this.state.url.map…”）这不应该发生，因为代码已经检查以确保this.state.url未定义。你还有其他地方有这个.state.url.map吗？