访问flatlist react native上的redux存储数组值

Question

我想访问要在FlatList中显示的redux存储数组中的图像文件名，但我不知道如何访问所有的文件名数组值。

这是我的初始状态

var InitialState = Record({
query : null,
searchResults: new (Record({
total: null,
lastPage: null,
items : [],
perPage : null,
currentPage : null,
nextPageUrl: null,
prevPageUrl:null,
}))(),
})

items阵列看起来像这个

[ { id: 1050,
user_id: null,
name: 'Item A',
description: null,
image :
{
id : 150,
filename : 'imageA.jpg'
}
},
{ id : 1051,
user_id: null,
name: 'Item A',
description: null,
image :
{
id : 152,
filename : 'imageB.jpg'
}
},
......
]

这是我显示图像的平面列表

<View>
...
<FlatList
data={this.props.search.searchResults.items}
renderItem={({item, index}) => this._renderItemInfo(item)}
keyExtractor={(item, index) => item.id.toString()}
/>
</View>

这是renderItemInfo函数

_renderItemInfo(item, index){
return(
<View style={styles.resultBox}>
<View style={{flex:1, flexDirection: 'row'}}>
<Image
style={{width: 100, height: 100}}
source={{uri: 'https://www.somewebsite.com/image/'+ this.props.search.searchResults.items[0].image.filename}}
/>
<Text id={item.id} style={{paddingLeft:5}}>{item.id} {item.name}</Text>
</View>
<Divider/>
</View>
)
}

关于图片来源，我如何访问所有文件名？

this.props.search.searchResults.items[0].image.filename

这只访问第一个数组。

如果我把索引放在数组键上

this.props.search.searchResults.items[index].image.filename

它给出了这个错误

TypeError:TypeError:null不是对象(正在评估this.props.search.searchResults.items[index].image.filename](

知道如何访问所有结果的图像文件名值吗？

Answer 1

将this.props.search.searchResults.items作为平面列表的数据属性传递，这意味着_renderItemInfo函数将作为item参数传递给该数组的每个成员。

这意味着当您设置图像组件的uri时，您应该能够访问item.image.filename。