将列表添加到来自 JSON 数据的 Picker.Item 组件反应本机博览会答案

【问题标题】：Add List to Picker.Item component from JSON data react native expo将列表添加到来自 JSON 数据的 Picker.Item 组件反应本机博览会
【发布时间】：2020-10-17 20:50:03
【问题描述】：

我想将数据添加到从 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>

        )   
}

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

【问题讨论】：

标签： json reactjs react-native expo asyncstorage

【解决方案1】：

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

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>

        )   
}

【讨论】：

出现如下错误信息：TypeError: undefined is not a function (near '...this.state.url.map...')
检查 if (this.state.url !== undefined) 而不是 this.state.url.length === 0，但我认为问题是异步存储中没有任何内容。获取数据后尝试控制台记录，看看那里是否真的有数据。
这是我添加 console.log('url login :', urlget); 时的结果在 asynctorage.getItem('url') 之后： [{"url":"192.168.2.100:3000","alias":"test"},{"url":"111.222.3.444:5555","alias": “产品”}]
代码更新后仍然出现同样的错误：TypeError: undefined is not a function (near '... this.state.url.map ...')
这不应该发生，因为代码已经检查以确保 this.state.url 不是未定义的。你还有其他地方有 this.state.url.map 吗？

【解决方案2】：

也许您根本没有弄清楚 AsyncStorage 可以存储的数据类型和用途。建议你详细阅读官方文档。

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

react-native-easy-app

【讨论】：