有条件地从 React-Native FlatList 渲染一些项目答案

【问题标题】：conditionally render some items from React-Native FlatList有条件地从 React-Native FlatList 渲染一些项目
【发布时间】：2020-10-25 23:40:22
【问题描述】：

我正在使用这样的 React Native FlatList：

export const UserList: React.FunctionComponent<UserListProps> = ({
  data,
  onSendRequest,
}) => {
  return (
    <View>
      <FlatList
        data={data?.users?.nodes}
        horizontal={false}
        scrollEnabled
        renderItem={({ item }) => (
          <User user={item} onSendRequest={onSendRequest} />
        )}
        keyExtractor={(item) => item?.id?.toString()}
        ListEmptyComponent={NoUsersContainer}
      />
    </View>
  );
};

目前，它呈现所有项目。有什么办法可以在内部 Flatlist 中引入某种检查？例如，如果

data.users.nodes.id == 1

然后不要渲染，而其余的都应该渲染。一般来说，我们可以用三元运算符或 if-else 语句来做这样的事情，但我想不出一个干净、正确的 FlatLists 方法。

【问题讨论】：

如果您不想显示某个 id 的节点，我会在将数据传递到平面列表之前过滤数据以排除这些节点。

标签： javascript reactjs typescript react-native react-native-flatlist

【解决方案1】：

过滤您的数据似乎是一个不错的起点。假设data.users.nodes 是一个数组，

export const UserList: React.FunctionComponent<UserListProps> = ({
  data,
  onSendRequest,
}) => {
  const blacklist = [1, 3, 4]; // Node IDs to exclude
  const filteredNodes = data?.users?.nodes 
    ? data.users.nodes.filter(node => !blacklist.includes(node.id))
    : [];
  return (
    <View>
      <FlatList
        data={filteredNodes}
        horizontal={false}
        scrollEnabled
        renderItem={({ item }) => (
          <User user={item} onSendRequest={onSendRequest} />
        )}
        keyExtractor={(item) => item?.id?.toString()}
        ListEmptyComponent={NoUsersContainer}
      />
    </View>
  );
};

【讨论】：