无法使用地图功能 react-native

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 });}
              );       
            }));
        };