问题
i have a item named outcome with data = Won, Lost, Void or null coming from the server. Currently i render all of them. I want to reduce/render only the null in this FlatList/ListItems screen.
Here the code:
<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}
/>
}
/>
So can i make the view that is displaying on the screen, only the boxes/information with outcome == null?
Thanks you.
回答1:
If you want to render all null items just filter your data like
<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}
/>
}
/>
If you don’t want null items
<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}
/>
}
/>
来源:https://stackoverflow.com/questions/52164044/react-native-flatlist-listitem-filter-by-item