React Native FlatList / ListItem filter by item

问题

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