React Native FlatList / ListItem 按项目过滤
React Native FlatList / ListItem filter by item
我有一个名为 outcome 的项目,其中数据 = Won、Lost、Void 或 null 来自服务器。目前我渲染所有这些。我只想 reduce/render 此 FlatList/ListItems 屏幕中的 null。
这里是代码:
<FlatList
data={this.state.doctorsList}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>
那么我可以制作在屏幕上显示的视图,只有 boxes/information 结果 == null 吗?
谢谢。
如果您想呈现所有空项目,只需过滤您的数据,如
<FlatList
data={this.state.doctorsList.filter(item => item === null)}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>
如果您不想要空项目
<FlatList
data={this.state.doctorsList.filter(item => item !== null)}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>
我有一个名为 outcome 的项目,其中数据 = Won、Lost、Void 或 null 来自服务器。目前我渲染所有这些。我只想 reduce/render 此 FlatList/ListItems 屏幕中的 null。
这里是代码:
<FlatList
data={this.state.doctorsList}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>
那么我可以制作在屏幕上显示的视图,只有 boxes/information 结果 == null 吗?
谢谢。
如果您想呈现所有空项目,只需过滤您的数据,如
<FlatList
data={this.state.doctorsList.filter(item => item === null)}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>
如果您不想要空项目
<FlatList
data={this.state.doctorsList.filter(item => item !== null)}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>