HarmonyOS 鸿蒙Next中根据官方arktslint错误代码修复后问题仍然存在

HarmonyOS 鸿蒙Next中根据官方arktslint错误代码修复后问题仍然存在 我用官方例子中的incorrect代码，执行full linter检测：[@performance/avoid-overusing-custom-component-check-性能规则@performance-Code Linter代码检查规则-代码检查-代码编辑-编写与调试应用 - 华为HarmonyOS开发者](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-avoid-overusing-custom-component-check)

问题代码如下：

import { util } from '@kit.ArkTS';

interface User {
  id: string;
  name: string;
  age?: number;
  avatarImage?: ResourceStr;
  // introduction: string;
  // ...
}

// 构造数据
const DEFAULT_BACKGROUND_COLOR = Color.Pink;
const getUsers = () => {
  const USERS: User[] = [{
    id: '1',
    name: '张三',
  }, {
    id: '2',
    name: '李四',
  }, {
    id: '3',
    name: '王五',
  }];
  return Array.from(Array(30), (item: User, i: number) => {
    return {
      id: util.generateRandomUUID(),
      name: USERS[i%3].name,
      avatarImage: $r('app.media.avatar'),
      age: 18 + i
    } as User;
  });
}

// 用户卡片列表组件
@Component
export struct UserCardList {
  @State users: User[] = getUsers();

  build() {
    List({ space: 8 }) {
      ForEach(this.users, (item: User) => {
        ListItem() {
          UserCard({ name: item.name, age: item.age, avatarImage: item.avatarImage })
        }
      }, (item: User) => item.id)
    }
    .alignListItem(ListItemAlign.Center)
  }
}

// 用户卡片自定义组件
@Component
struct UserCard {
  @Prop avatarImage: ResourceStr;
  @Prop name: string;
  @Prop age: number;

  build() {
    Row() {
      Row() {
        Image(this.avatarImage)
          .size({ width: 50, height: 50 })
          .borderRadius(25)
          .margin(8)
        Text(this.name)
          .fontSize(30)
      }

      Text(`年龄：${this.age.toString()}`)
        .fontSize(20)
    }
    .backgroundColor(DEFAULT_BACKGROUND_COLOR)
    .justifyContent(FlexAlign.SpaceBetween)
    .borderRadius(8)
    .padding(8)
    .height(66)
    .width('80%')
  }
}

我根据我的理解修复后代码：

import { util } from '@kit.ArkTS';

interface User {
  id: string;
  name: string;
  age?: number;
  avatarImage?: ResourceStr;
  // introduction: string;
  // ...
}

// 构造数据
const DEFAULT_BACKGROUND_COLOR = Color.Pink;
const getUsers = () => {
  const USERS: User[] = [{
    id: '1',
    name: '张三',
  }, {
    id: '2',
    name: '李四',
  }, {
    id: '3',
    name: '王五',
  }];
  return Array.from(Array(30), (item: User, i: number) => {
    return {
      id: util.generateRandomUUID(),
      name: USERS[i%3].name,
      avatarImage: $r('app.media.avatar'),
      age: 18 + i
    } as User;
  });
}

// 用户卡片列表组件
@Component
export struct UserCardList {
  @State users: User[] = getUsers();

  // 使用 @Builder 替换 UserCard 自定义组件
  @Builder
  userCardBuilder(name: string, age: number, avatarImage: ResourceStr) {
    Row() {
      Row() {
        Image(avatarImage)
          .size({ width: 50, height: 50 })
          .borderRadius(25)
          .margin(8)
        Text(name)
          .fontSize(30)
      }

      Text(`年龄：${age.toString()}`)
        .fontSize(20)
    }
    .backgroundColor(DEFAULT_BACKGROUND_COLOR)
    .justifyContent(FlexAlign.SpaceBetween)
    .borderRadius(8)
    .padding(8)
    .height(66)
    .width('80%')
  }

  build() {
    List({ space: 8 }) {
      ForEach(this.users, (item: User) => {
        ListItem() {
          this.userCardBuilder(item.name, item.age, item.avatarImage)
        }
      }, (item: User) => item.id)
    }
    .alignListItem(ListItemAlign.Center)
  }
}

// 原 UserCard 组件已删除，由 @Builder 函数替代

但还是会报错：

cke_33157.png

我要在UserCardList中添加如下方法才能消除此告警：

aboutToAppear(): void {
    let message = 'hello world';
  }

这样不合理吧，应该是修改了类型就能解决啊


更多关于HarmonyOS 鸿蒙Next中根据官方arktslint错误代码修复后问题仍然存在的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，若按arktslint错误代码修复后问题仍存在，可尝试以下步骤：

  1. 清理项目缓存，重新编译。
  2. 检查IDE版本与HarmonyOS SDK是否最新。
  3. 确认arktslint规则是否与当前API版本兼容。
  4. 查看官方文档或社区是否有已知问题。

更多关于HarmonyOS 鸿蒙Next中根据官方arktslint错误代码修复后问题仍然存在的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是因为 [@Builder](/user/Builder) 函数中使用了外部变量 DEFAULT_BACKGROUND_COLOR 导致的。@performance/avoid-overusing-custom-component-check 规则检测到 [@Builder](/user/Builder) 函数引用了组件外部的常量，这可能导致不必要的重建。

正确的修复方式是将 DEFAULT_BACKGROUND_COLOR 移动到 UserCardList 组件内部，或者作为参数传递给 [@Builder](/user/Builder) 函数。以下是修改方案：

方案一：将常量移到组件内部

@Component
export struct UserCardList {
  private DEFAULT_BACKGROUND_COLOR: Color = Color.Pink;
  // ... 其他代码保持不变
}

方案二：作为参数传递给 @Builder

[@Builder](/user/Builder)
userCardBuilder(name: string, age: number, avatarImage: ResourceStr, backgroundColor: Color) {
  Row() {
    // ... 原有内容
  }
  .backgroundColor(backgroundColor)  // 使用参数
  // ... 其他样式
}

// 调用时传递颜色
this.userCardBuilder(item.name, item.age, item.avatarImage, Color.Pink)

你添加 aboutToAppear() 方法能消除告警是因为改变了组件的结构，但这并不是正确的解决方案。按照上述任一方案修改即可正确解决该 lint 规则报错。

回到顶部