Question

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

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

然后是<ImagePickerAndList />

中的flatList

<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。

现在只需编辑代码即可使用

  @Output() opened: EventEmitter<void> = new EventEmitter();

item->从数组中获取元素

index->当前元素的索引

我希望它会有所帮助：）

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

图片的平面列表未定义？

2 个答案: