根据项目反应本机FlatList/ListItem过滤器 [英] React Native FlatList / ListItem filter by item

问题描述

我有一个名为result的项目，其数据来自服务器，数据为Won，Lost，Void或null.目前，我渲染所有这些.我只想在此FlatList/ListItems屏幕中减少/呈现null.

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.

代码在这里:

                  <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?

谢谢.

推荐答案

如果要渲染所有空项目，只需像过滤数据一样

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}
          />
        }
            />

如果您不希望空项目

  <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/ListItem过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！