访问 flatlist 上的 redux 存储数组值反应原生答案

【问题标题】：Access redux store array value on flatlist react native访问 flatlist 上的 redux 存储数组值反应原生
【发布时间】：2018-10-28 11:07:05
【问题描述】：

我想访问 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 不是对象（评估 'this.props.search.searchResults.items[index].image.filename')

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

【问题讨论】：

标签： arrays react-native redux react-redux react-native-flatlist

【解决方案1】：

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

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

【讨论】：