Question

我是本机反应的新手，我正在使用异步存储来存储对象，然后通过将它们存储在收藏夹数组中进行解析。我试图映射数组中的每个元素并显示它。

我收到此错误：this.state.favorites.map不是函数。我认为这是一个状态错误，但是由于我是这些概念的新手，所以我不知道如何解决它。请帮忙。

import React, {Component} from 'react';
import {StyleSheet, Text, View, Image,  FlatList, Button, AsyncStorage, 
TouchableOpacity} from 'react-native';
import ajax from './ajax.js';
import PropTypes from 'prop-types';
import InspirationList from './InspirationList';
import FavoriteItem from './FavoriteItem';
import ProductItem from './ProductItem';


class Favorites extends Component{
    state = {
        favorites:[],
      };

componentDidMount(){
    this.showProduct();
  }

    async showProduct() {
        let k=0;
        AsyncStorage.getAllKeys()
            .then(keys => AsyncStorage.multiGet(keys)
            .then((result) => {
                result.map(req => req.forEach((element) => {
                    k++;
                    if(element!=null && k%2==0){
                    this.setState({favorites: JSON.parse(element) });
                    console.log(this.state.favorites.nume);
                     }
                  }));       
            }));
        };

  render(){
    return(
    <View style='styles.fav'>
        {this.state.favorites.map((fav)=>
            <Text>{fav.nume}</Text>
        )}
    </View>
    );
  }
}

const styles = StyleSheet.create({  
 fav:{
     backgroundColor:'#999',
     flex:1,
     width:'100%',
     paddingTop:150,
 }
});

export default Favorites;

Answer 1

在您的showProduct函数上，您将覆盖您原来的状态。分配JSON.parse(element)时，您在更改状态而不是在使用数组，而是将其转换为对象，这就是为什么会出现此错误的原因。 map仅在类似数组的数组中存在。

所以也许您可以做类似的事情：

async showProduct() {
        let k=0;
        AsyncStorage.getAllKeys()
            .then(keys => AsyncStorage.multiGet(keys)
            .then((result) => {
                result.map(req => {
                  let result = [];
                  req.forEach((element) => {
                    k++;                        
                    if(element!=null && k%2==0){
                      result.push(JSON.parse(element))
                    }
                    });
                  this.setState({favorites: result });}
              );       
            }));
        };

无法使用地图功能react-native

1 个答案: