我正在通过视频教程来学习React Native的应用开发。此代码存在以下问题。我试图遍历清单数组中的所有元素。我正在使用“ map（）=>”函数来执行此操作，但是我一直在获取
TypeError: undefined is not a function (evaluating '_listings2.default.map')
该代码在视频教程中有效，但不适用于我。 这是我用来遍历元素的代码：
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import SearchBar from '../components/SearchBar';
import Categories from '../components/explore/Categories';
import Listings from '../components/explore/Listings'; // <-- Added from video 14
import colors from '../styles/colors';
import categoriesList from '../data/categories';
import listings from '../data/listings';
export default class InboxContainer extends Component {
static navigationOptions = {
tabBarLabel: 'EXPLORE',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name= {focused ? "ios-home" : "ios-home-outline"}
size= {22}
color= {tintColor}
/>
),
};
renderListings() {
return listings.map((listing, index) => {
return (
<View
key={`listing-${index}`}
>
<Listings
key={`listing-item-${index}`}
title={listing.title}
boldTitle={listing.boldTitle}
listings={listing.listings}
showAddToFav={listing.showAddToFav}
/>
</View>
);
});
}
render() {
return (
<View style={styles.wrapper}>
<SearchBar />
<ScrollView
style={styles.scrollview}
contentContainerStyle={styles.scrollViewContent}
>
<Text style={styles.heading}>Explore Vmap</Text>
<View style={styles.categories}>
<Categories categories={ categoriesList } />
</View>
{this.renderListings()}
</ScrollView>
</View>
);
}
};
const styles = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: colors.white,
},
scrollview: {
paddingTop: 100,
},
scrollViewContent: {
paddingBottom: 80,
},
categories: {
},
heading: {
fontSize: 22,
fontWeight: '600',
paddingLeft: 20,
paddingBottom: 20,
//paddingTop: 10,
color: colors.gray04,
},
});
这是我使用的listings.js文件：
const listings = [
{
title: 'Experiences',
boldTitle: false,
showAddToFav: true,
listings: [
{
id: 1,
photo: require('./photos/listing1.png'),
type: 'BOAT RIDE',
title: 'Sail past Japan\'s largest port with a certified skipper',
price: 60,
priceType: 'per person',
stars: 29,
},
{
id: 2,
photo: require('./photos/listing2.png'),
type: 'CHEESE TASTING',
title: 'Funny cheesemonger takes you on a Tour de Fromage',
price: 70,
priceType: 'per person',
stars: 4,
},
{
id: 3,
photo: require('./photos/listing3.png'),
type: 'BIKE RIDE',
title: 'Cycling, "KFC" & Drinking for your Seoul',
price: 47,
priceType: 'per person',
stars: 30,
},
{
id: 4,
photo: require('./photos/listing4.png'),
type: 'BIKE RIDE',
title: 'Cycle through side streets with local',
price: 57,
priceType: 'per person',
stars: 70,
},
{
id: 5,
photo: require('./photos/listing5.png'),
type: 'SURFING',
title: 'Surf Bondi\'s waves, then eat & drink like a local',
price: 61,
priceType: 'per person',
stars: 66,
},
{
id: 6,
photo: require('./photos/listing6.png'),
type: 'DRAWING CLASS',
title: 'A drawing/walking tour in Montmartre',
price: 55,
priceType: 'per person',
stars: 15,
}
]
},
{
title: 'Homes',
boldTitle: false,
showAddToFav: true,
listings: [
{
id: 6,
photo: require('./photos/listing6.png'),
type: 'DRAWING CLASS',
title: 'A drawing/walking tour in Montmartre',
price: 55,
priceType: 'per person',
stars: 15,
},
{
id: 7,
photo: require('./photos/listing7.png'),
type: 'ENTIRE HOUSE - 1 BED',
title: 'BALIAN TREEHOUSE with beautiful pool',
price: 72,
priceType: 'per person',
stars: 101,
},
{
id: 8,
photo: require('./photos/listing8.png'),
type: 'ENTIRE VILLA - 3 BEDS',
title: 'Casa deRio - Beach and Mountains',
price: 69,
priceType: 'per person',
stars: 119,
},
{
id: 9,
photo: require('./photos/listing9.png'),
type: 'ENTIRE HOUSE - 1 BED',
title: 'Cozy A-Frame Cabin in the Redwoods',
price: 152,
priceType: 'per person',
stars: 320,
},
{
id: 10,
photo: require('./photos/listing10.png'),
type: 'ENTIRE GUESTHOUSE - 1 BED',
title: '1880s Carriage House in Curtis Park',
price: 116,
priceType: 'per person',
stars: 300,
},
{
id: 11,
photo: require('./photos/listing11.png'),
type: 'ENTIRE BOAT - 2 BEDS',
title: 'A Pirate\'s Life for Me Houseboar!',
price: 182,
priceType: 'per person',
stars: 132,
}
]
},
{
title: 'Popular Reservatios',
boldTitle: true,
showAddToFav: false,
listings: [
{
id: 12,
photo: require('./photos/listing12.png'),
type: "RESERVATION",
title: 'G\'raj Mahal',
price: '30',
priceTitle: 'per person',
stars: 0,
},
{
id: 13,
photo: require('./photos/listing13.png'),
type: "RESERVATION",
title: 'Le Font',
price: '30',
priceTitle: 'per person',
stars: 0,
},
{
id: 14,
photo: require('./photos/listing14.png'),
type: "RESERVATION",
title: 'The Waiting Room',
price: '34',
priceTitle: 'per person',
stars: 0,
},
{
id: 15,
photo: require('./photos/listing15.png'),
type: "RESERVATION",
title: 'Bar Boulud',
price: '64',
priceTitle: 'per person',
stars: 0,
}
]
}
];
我想知道这段代码（和listings.js文件）有什么问题
编辑： 我添加了所有导入listings.js文件的代码。
答案 0 :(得分：1)
在listing.js文件更改的顶部
const listings =至export default const listings =
，并且需要在InboxContainer文件的顶部添加：
import listings from '../data/listing.js';
另一种略有不同的方法是不使用默认关键字进行导出：
在listing.js文件更改的顶部
const listings =至export const listings =
，并且需要在InboxContainer文件的顶部添加：
import { listings } from '../data/listing.js';
您会注意到上面的括号语法，这使您可以从单个文件导入多个对象，例如，如果您有多个导出的列表对象，则可以执行以下操作：
import { listings1, listing2, listings3 } from '../data/listing.js';