Question

我有一个名为result的项目，其数据来自服务器，数据为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}
                      />
                    }
                    />

那么我可以制作显示在屏幕上的视图，仅显示结果为==的框/信息为空吗？

谢谢。

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

如果您不希望空项目

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

React Native FlatList / ListItem按项目过滤

1 个答案: