图片的平面列表未定义?

Question

>我正在尝试在子组件中渲染图像的平面列表。图片数组是父状态组件的一部分，包含每张图片的 uri。我这样传给孩子：

<ImagePickerAndList
pictures={this.state.pictures}
/>

然后是<ImagePickerAndList />中的平面列表

<FlatList //what I see is nothing renders
data={props.pictures}
extraData={props.pictures}
horizontal
keyExtractor={picture => picture} //no idea if this is a good practice or not
renderItem={({ picture }) => {
console.log(picture); //this will log undefined for each item in list
console.log('hi'); //this will log for each item in list
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Image source={{ uri: picture }} style={{ width: 100, height: 100 }} />
</View>
);
}}
/>

Answer 1

不能更改渲染项内的变量名称。 如果要遍历数组，那么对于每个元素，您必须使用item，而索引只需使用index。

现在只需编辑您的代码即可工作

<FlatList //what I see is nothing renders
data={props.pictures}
extraData={props.pictures}
horizontal
keyExtractor={picture => picture} //no idea if this is a good practice or not
renderItem={({ item,index }) => {
console.log(picture); //this will log undefined for each item in list
console.log('hi'); //this will log for each item in list
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Image source={{ uri: item}} style={{ width: 100, height: 100 }} />
</View>
);
}}
/>

项目 ->从数组中获取元素

索引 -> 当前元素的索引

我希望它有所帮助，谢谢:)

Answer 2

不能更改渲染项内的变量名称。如果要遍历数组，那么对于每个元素，您必须使用item，而索引只需使用index。

现在只需编辑您的代码即可工作

<FlatList //what I see is nothing renders
data={props.pictures}
extraData={props.pictures}
horizontal
keyExtractor={picture => picture} //no idea if this is a good practice or not
renderItem={({ item,index }) => {
console.log(picture); //this will log undefined for each item in list
console.log('hi'); //this will log for each item in list
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Image source={{ uri: item}} style={{ width: 100, height: 100 }} />
</View>
);
}}
/>