ResourceStr拼装时以下方式时会报错。

错误方式:字符串 + string变量/常量

const val:string = 'img2';
$r('app.media.'+val);

正确方式:使用``间隔号,而不是''引号。即英文输入模式下,键盘1左侧键

const val:string = 'img2';
$r(`app.media.${val}`);

函数正确方式:你也可以使用函数来触发状态刷新比如:

@Local val:string = 'img2';
test(){
    this.val = 'img5';
}
changeImg = (str:string):ResourceStr=>{
    return $(`app.media.${str}`);
}
Image(this.changeImg(this.val));

错误方式:但是!【注意!】一旦你使用异步 async ,则会报错

1.异步函数报错

@Local val:string = 'img2';
test(){
    this.val = 'img5';
}
changeImg = async (str:string):Promise<ResourceStr>=>{
    try{
        const reData = await sqliteFun(str);
        return $(`app.media.${reData}`);
    } catch (e){ ... }
}
Image(this.changeImg(this.val));

2.以组装方式字符串+异步函数,则不报错但无效!

@Local val:string = 'img2';
test(){
    this.val = 'img5';
}
changeImg = async (str:string):Promise<string>=>{
    try{
        const reData:string = await sqliteFun(str);
        return reData;
    } catch (e){ ... }
}
Image($r(`app.media.${this.changeImg(this.val)}`));

异步正确方式:异步该怎么办?

作用与@State @Local等装饰符绑定的变量本身。比如:

@Trace face:ResourceStr = $r('app.media.img5');

private async setFace(){
    const data: skinDatas = await SQLiteGetSkinById(this.id);
    this.face = $r(`app.media.${data.face}`);
  }

原理即,不要把异步作用于UI标签,异步应作用于变量赋值。

异步->回调->赋值->UI刷新

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐