HarmonyOS 鸿蒙Next Repeat循环渲染如何过滤掉数据源中的重复元素

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Repeat循环渲染如何过滤掉数据源中的重复元素 如题，不知如何向ForEach一样过滤掉数据源中的重复元素，看其“键值生成规则”中似乎无法过滤重复元素呀，有大佬支支招吗？

@Entry
@Component
struct Parent {
  @State simpleList: Array<string> = ['one', 'two', 'three', 'three'];

  build() {
    Column() {
      Column() {
        Repeat<string>(this.simpleList)
          .each((obj: RepeatItem<string>)=>{
            ChildItem({ item: obj.item })
          })
          .key((item: string) => item)
      }
      .width('100%')
      Divider()
      Column() {
        ForEach(this.simpleList, (item: string) => {
          ChildItem({item: item})
        }, (item: string) => item)
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

@Component
struct ChildItem {
  @Prop item: string;

  build() {
    Text(this.item)
      .fontSize(50)
  }
}

键值生成规则


更多关于HarmonyOS 鸿蒙Next Repeat循环渲染如何过滤掉数据源中的重复元素的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

Repeat并不提供过滤重复元素的功能，它只是优化了渲染过程，直接复用重复元素。

你要过滤重复元素可以用Set

@State simpleList: Set<string> = new Set<string>(["one", "tow", "three", "three"]);

Repeat<string>(Array.from(this.simpleList))
    .each((obj: RepeatItem<string>) => {
      // ...
    })

更多关于HarmonyOS 鸿蒙Next Repeat循环渲染如何过滤掉数据源中的重复元素的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


明白了，谢谢，

在HarmonyOS鸿蒙系统中，进行Next Repeat循环渲染时，若需要过滤掉数据源中的重复元素，可以通过以下方式实现：

首先，确保你的数据源是一个列表或数组。在渲染之前，对数据源进行处理，移除重复项。这通常涉及到遍历数据源，并使用一个辅助的数据结构（如集合Set）来记录已经出现过的元素，从而过滤掉重复的部分。

具体步骤如下：

  1. 创建一个空的集合（Set），用于存储已经出现过的元素。
  2. 遍历原始数据源列表。
  3. 对于列表中的每个元素，检查它是否已经在集合中存在。
  4. 如果不存在，则将该元素添加到结果列表和集合中。
  5. 如果存在，则跳过该元素。

经过上述处理后，结果列表将不包含任何重复元素。然后，你可以将这个处理后的列表作为数据源传递给Next Repeat组件进行渲染。

示例代码（伪代码形式，具体实现需根据鸿蒙开发框架调整）：

let originalData = [/* 数据源 */];
let uniqueData = [];
let seen = new Set();

for (let item of originalData) {
    if (!seen.has(item)) {
        uniqueData.push(item);
        seen.add(item);
    }
}

// 使用uniqueData作为Next Repeat的数据源进行渲染
``

如果问题依旧没法解决请联系官网客服,官网地址是 [https://www.itying.com/category-93-b0.html](https://www.itying.com/category-93-b0.html)，
回到顶部