Question

我正在像这样使用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>
  );
};

当前，它渲染所有项目。有什么办法可以让我在内部查看扁平化检查？例如，如果

data.users.nodes.id == 1

然后不渲染，其余的都应该渲染。通常，我们可以使用三元运算符或if-else语句来执行类似的操作，但是我想不出FlatList的一种干净，正确的方法。

Answer 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>
  );
};

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

1 个答案: