访问 flatlist 上的 redux store 数组值 react native

Question

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

这是我的初始状态

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 is not an object (evaluating 'this.props.search.searchResults.items[index].image.filename')

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

Answer 1

您将 this.props.search.searchResults.items 作为 flatlist 的数据属性传递，这意味着 _renderItemInfo 函数将传递给该数组的每个成员，因为它是 item参数。

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

访问 flatlist 上的 redux store 数组值 react native

Access redux store array value on flatlist react native

arrays

react-native

redux

react-redux

react-native-flatlist