类型错误： 无法读取未定义的属性'map'？开玩笑/反应原生

Question

我有一个图像滑块组件来显示我的Firebase数据库中的图像，如下所示，

import React from 'react';
import Swiper from 'react-native-swiper';
import { View, StyleSheet, Image } from 'react-native'

const ImageSlider = ({images}) => {
return (
<Swiper autoplayTimeout={5}
style={styles.wrapper}
showsButtons={false}
loadMinimal={true}
showsPagination={true}
paginationStyle={styles.paginationStyle}
activeDotStyle={styles.activeDotStyle}
dotStyle={styles.dotStyle}
loop={true} autoplay={true}
>
{images.map((data, index) => {
return (
<View key={index} style={styles.slider}>
<Image style={styles.itemImage} source={{ uri: data }} />
</View>
)
})}
</Swiper>
)
}

对于上面的组件，我使用了以下测试文件，

import React from 'react';
import renderer from 'react-test-renderer';
import ImageSlider from '../../../src/components/imageSlider/ImageSlider';

test('renders correctly', () => {
const tree = renderer.create(<ImageSlider />).toJSON();
expect(tree).toMatchSnapshot();
});

当我运行npm test命令时，我得到以下错误

TypeError: Cannot read property 'map' of undefined

谁能帮我解决这个问题，谢谢你

Answer 1

在您的测试中，您创建了一个没有任何参数的ImageSlider:

<ImageSlider />

在ImageSlider中，尝试映射属性images:

images.map( //etc

因为你没有传递一个images参数/属性，images是未定义的，当你试图映射它。要解决这个问题，在测试中传递images的值:

<ImageSlider images={YOUR_TEST_IMAGES_DATA}/>

另一个选择是重新设计ImageSlider，以便在images未定义时正常失败。但是，这样做就没有多大意义了(除非测试是为了看看如果没有传入参数会发生什么)