React Native FlatList / ListItem 按项目过滤答案

【问题标题】：React Native FlatList / ListItem filter by itemReact Native FlatList / ListItem 按项目过滤
【发布时间】：2018-09-04 10:20:54
【问题描述】：

我有一个名为结果的项目，数据 = Won、Lost、Void 或 null 来自服务器。目前我渲染所有这些。我想在此 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}
                      />
                    }
                    />

那么我可以让屏幕上显示的视图只显示结果 == 为空的框/信息吗？

谢谢。

【问题讨论】：

标签： react-native filter listitem react-native-flatlist

【解决方案1】：

如果您想呈现所有空项，只需过滤您的数据，例如

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

如果您不想要 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}
          />
        }
            />

【讨论】：

仅将 item !== null)} 更改为 item.outcome !== null)} 及其工作，谢谢！