devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

arkts鸿蒙@State定义复杂嵌套数据结构子级更新后视图不更新_arkts开发数组对象值改变,视图不更新

作者：繁依Fanyi0 | 2024-07-05 11:22:51

赞

踩

arkts开发数组对象值改变,视图不更新
数据结构如下：评论列表中带有的每条评论嵌套回复列表
  1. // 评论字段
  2. export interface  CommentInterface {
  3.   id:number,//主键
  4.   content:string,//评论内容
  5.   parentId:number,//父节点id
  6.   type:string,// 类型
  7.   topId:number,//顶级节点id
  8.   relationId:number,//影片id
  9.   createTime:string,//创建时间
  10.   updateTime:string,//更新时间
  11.   replyCount:number,//回复数量
  12.   userId:string,//用户id
  13.   username:string,//用户名
  14.   avater:string,//用户头像
  15.   replyUserId:string,//被回复者id
  16.   replyUserName:string,//被回复者名称
  17.   showCommentCount:string,//显示的回复数量
  18.   replyPageNum:number,// 回复数量
  19.   replyList:Array<CommentInterface>// 回复列表
  20. }

后端接口返回格式如下：

  1. [
  2.     {
  3.         "id": 112,
  4.         "content": "精彩",
  5.         "parentId": null,
  6.         "topId": null,
  7.         "relationId": 72667,
  8.         "type": "MOVIE",
  9.         "createTime": "2024-05-25T07:17:28.000+0000",
  10.         "updateTime": null,
  11.         "replyCount": 1,
  12.         "userId": "灯火阑珊",
  13.         "username": "灯火阑珊2",
  14.         "avater": "/static/user/avater/灯火阑珊.jpg",
  15.         "replyUserId": null,
  16.         "replyUserName": null,
  17.         "replyList": [
  18.             {
  19.                 "id": 148,
  20.                 "content": "666",
  21.                 "parentId": 112,
  22.                 "topId": 112,
  23.                 "relationId": 72667,
  24.                 "type": "MOVIE",
  25.                 "createTime": "2024-05-26T08:07:53.000+0000",
  26.                 "updateTime": null,
  27.                 "replyCount": 0,
  28.                 "userId": "初晓微芒",
  29.                 "username": "初晓微芒",
  30.                 "avater": "/static/user/avater/初晓微芒.jpg",
  31.                 "replyUserId": "灯火阑珊",
  32.                 "replyUserName": "灯火阑珊2",
  33.                 "replyList": null
  34.             }
  35.         ]
  36.     }
  37. ]

展示效果如下

点击回复，向item.replyList中插入一条回复内容，视图不更新，但数据库已经插入成功

  1. // 发送评论
  2. insertCommentService(commentItem).then((res) => {
  3.   if (this.firstComment) { // 二级评论，相当于回复，插入一条回复
  4.     this.commentList[this.replyIndex].replyList.push(res.data);
  5.   } else { // 一级评论
  6.     this.commentList.push(res.data);
  7.   }
  8.   this.dialogController?.close();
  9.   this.replyComment = this.firstComment = null;
  10.   this.text = '';
  11.   this.focusableInput = false;
  12. }).finally(() => {
  13.   this.loading = false;
  14. });

数据库中显示插入数据成功了，但是视图没有更新

解决办法1（推荐第2种方法）：

1、把原来的数组解构重新赋值，

2、往新定义的数组里面添加回复数据

3、重新赋值给原来的数据，即可实现视图更新，

原理：强制改变原数组的内存地址，让视图重新渲染

  1. // 发送评论
  2. insertCommentService(commentItem).then((res) => {
  3.   // 必须重新解构，然后再赋值，否则添加回复不生效
  4.   const commentList = [...this.commentList];
  5.   if (this.firstComment) { // 二级评论，相当于回复
  6.     commentList[this.replyIndex].replyList.push(res.data);
  7.   } else { // 一级评论
  8.     commentList.push(res.data);
  9.   }
  10.   // 重新赋值，改变对象的内存地址，否则添加回复不生效
  11.   this.commentList = commentList;
  12.   this.dialogController?.close();
  13.   this.replyComment = this.firstComment = null;
  14.   this.text = '';
  15.   this.focusableInput = false;
  16. }).finally(() => {
  17.   this.loading = false;
  18. });

解决方法2（推荐）：

1、把要添加回复的那一条数据解构重新赋值给新的一个对象

2、往新定义的对象里面的列表添加回复数据

3、使用数组splice方法，把原来数组里面的一条数据替换成新定义的对象，

原理：只改变数据中一条数据的内存地址，不改变原来数组的内容地址，性能要高于第一种方案

  1. // 发送评论
  2. insertCommentService(commentItem).then((res) => {
  3.   if (this.firstComment) { // 二级评论，相当于回复
  4.     // 必须重新解构，然后再赋值，否则添加回复不生效
  5.     const commentItem = {...this.commentList[this.replyIndex]};
  6.     commentItem.replyList === null && (commentItem.replyList = []);
  7.     commentItem.replyList.push(res.data);// 添加回复列表
  8.     this.commentList.splice(this.replyIndex,1,commentItem);// 替换掉原数据里面的那一条数据
  9.   } else { // 一级评论
  10.     this.commentList.push(res.data);
  11.   }
  12.   // 重新赋值，改变对象的内存地址，否则添加回复不生效
  13.   this.dialogController?.close();
  14.   this.replyComment = this.firstComment = null;
  15.   this.text = '';
  16.   this.focusableInput = false;
  17. }).finally(() => {
  18.   this.loading = false;
  19. });

完整代码如下

  1. import * as colors from '../../theme/color';
  2. import * as size from '../../theme/size';
  3. import {getTopCommentListService,insertCommentService} from '../service/Index';
  4. import { HOST } from '../../config/constant';
  5. import { CommentInterface } from '../../music/interface/Index';
  6. import { formatTime } from '../../utils/common';
  7.  
  8. // 传入buildCommentList方法必须是一个对象形式，否则无法实现响应式
  9. interface CommentParamsInterface{
  10.   commentList:Array<CommentInterface>
  11. }
  12.  
  13. @Component
  14. export default struct CommentComponent{
  15.   @Prop relationId:number;
  16.   @Prop commentListStr:string;// 评论数组字符串
  17.   @Prop type:string;
  18.   @State commentTotal:number = 0;
  19.   @State commentList:Array<CommentInterface> = [];
  20.   @State text:string = '';// 评论框文字
  21.   @State firstComment:CommentInterface = null;
  22.   @State replyComment:CommentInterface = null;
  23.   @State replyIndex:number = -1;
  24.   @State focusableInput:boolean = false;
  25.   private loading:boolean = false;
  26.   private scroller: Scroller = new Scroller()
  27.   private dialogController:CustomDialogController;
  28.  
  29.   aboutToAppear(){
  30.  
  31.     /**
  32.      * @author: wuwenqiang
  33.      * @description: 获取评论列表
  34.      * @date: 2024-05-25 21:36
  35.      */
  36.     if(this.commentListStr){
  37.       this.commentList = JSON.parse(this.commentListStr) as Array<CommentInterface>;
  38.     }else{
  39.       getTopCommentListService(this.relationId,this.type,1,20).then(res => {
  40.         this.commentList = res.data;
  41.         this.commentTotal = res.total;
  42.       });
  43.     }
  44.   }
  45.  
  46.   /**
  47.    * @author: wuwenqiang
  48.    * @description: 打开评论框弹窗
  49.    * @date: 2024-05-26 14:26
  50.    */
  51.   openDialog():void{
  52.     if(!this.dialogController){
  53.       this.dialogController = new CustomDialogController({
  54.         customStyle: true,
  55.         builder: this.buildCommentInput(),
  56.         alignment: DialogAlignment.Bottom,
  57.       })
  58.     }
  59.     this.dialogController.open()
  60.   }
  61.  
  62.   /**
  63.    * @author: wuwenqiang
  64.    * @description: 创建评论框
  65.    * @date: 2024-05-26 14:26
  66.    */
  67.   @Builder buildCommentInput(){
  68.     Column() {
  69.       Row() {
  70.         TextInput({ text:this.text,placeholder: this.replyComment ? `回复${this.replyComment.username}` : (this.firstComment ? `回复${this.firstComment.username}` : '评论') })
  71.           .layoutWeight(1)
  72.           .focusable(this.focusableInput)
  73.           .height(size.inputHeight)
  74.           .onChange((value) => {
  75.             this.text = value;
  76.           }).onClick(() => {
  77.             this.focusableInput = true
  78.           })
  79.         Button('发送', { type: ButtonType.Capsule, stateEffect: true })
  80.           .backgroundColor(colors.lineBackgroundColor)
  81.           .width(size.btnWidth)
  82.           .enabled(Boolean(this.text))
  83.           .height(size.inputHeight)
  84.           .margin({ left: size.pagePadding })
  85.           .onClick(() => {
  86.             if (this.loading) return;
  87.             this.loading = true;
  88.             const commentItem: CommentInterface = {
  89.               id: 0, //主键
  90.               content: this.text, //评论内容
  91.               parentId: this.replyComment?.id, //父节点id
  92.               topId: this.firstComment?.id, //顶级节点id
  93.               type: this.type, // 类型
  94.               relationId: this.relationId, //影片id
  95.               createTime: "", //创建时间
  96.               updateTime: "", //更新时间
  97.               replyCount: 0, //回复数量
  98.               userId: "", //用户id
  99.               username: "", //用户名
  100.               avater: "", //用户头像
  101.               replyUserId: "", //被回复者id
  102.               replyUserName: "", //被回复者名称
  103.               showCommentCount: "", //显示的回复数量
  104.               replyPageNum: 0,
  105.               replyList: []
  106.             }
  107.             // 发送评论
  108.             insertCommentService(commentItem).then((res) => {
  109.               if (this.firstComment) { // 二级评论，相当于回复
  110.                 // 必须重新解构，然后再赋值，否则添加回复不生效
  111.                 const commentItem = {...this.commentList[this.replyIndex]};
  112.                 commentItem.replyList === null && (commentItem.replyList = []);
  113.                 commentItem.replyList.push(res.data);// 添加回复列表
  114.                 this.commentList.splice(this.replyIndex,1,commentItem);// 替换掉原数据里面的那一条数据
  115.               } else { // 一级评论
  116.                 this.commentList.push(res.data);
  117.               }
  118.               // 重新赋值，改变对象的内存地址，否则添加回复不生效
  119.               this.dialogController?.close();
  120.               this.replyComment = this.firstComment = null;
  121.               this.text = '';
  122.               this.focusableInput = false;
  123.             }).finally(() => {
  124.               this.loading = false;
  125.             });
  126.           })
  127.       }.backgroundColor(colors.blockColor).padding(size.pagePadding)
  128.     }
  129.     .width('100%')
  130.   }
  131.  
  132.   /**
  133.    * @author: wuwenqiang
  134.    * @description: 点击弹出评论框
  135.    * @date: 2024-05-26 14:26
  136.    */
  137.   useReply(item:CommentInterface,index:number){
  138.     if(this.commentListStr){
  139.       this.openDialog();
  140.     }
  141.     this.focusableInput = true;
  142.     this.replyIndex = index;
  143.     if(item.topId){
  144.       this.replyComment = item;// 二级评论，即回复的内容
  145.       this.firstComment = this.commentList.find(aItem => aItem.id === item.topId)
  146.     }else{
  147.       this.replyComment = this.firstComment = item;// 点击的是一级评论
  148.     }
  149.   }
  150.  
  151.   /**
  152.    * @author: wuwenqiang
  153.    * @description: 创建评论列表,参数必须用对象或者接口形式传递，否则参数变化了，视图不更新
  154.    * @date: 2024-05-25 16:30
  155.    */
  156.   @Builder buildCommentList(commentParams:CommentParamsInterface){
  157.     Column({space:size.pagePadding}){
  158.       ForEach(commentParams.commentList,(aItem:CommentInterface,aIndex:number) => {
  159.         Row(){
  160.           Image(aItem.avater ? HOST + aItem.avater : $r('app.media.default_avater'))
  161.             .width(aItem.topId ? size.smallAvaterSize :size.middleAvaterSize)
  162.             .height(aItem.topId ? size.smallAvaterSize :size.middleAvaterSize)
  163.             .borderRadius(aItem.topId ? size.smallAvaterSize :size.middleAvaterSize)
  164.           Column(){
  165.             Text(aItem.topId ? `${aItem.username}▶${aItem.replyUserName}` :aItem.username)
  166.               .fontColor(colors.disableTextColor).margin({bottom:size.miniPadding})
  167.             Text(aItem.content).margin({bottom:size.miniPadding})
  168.             Text(formatTime(aItem.createTime)).fontColor(colors.disableTextColor)
  169.             if(aItem.replyList?.length > 0){
  170.               Blank().height(size.pagePadding)
  171.               // 参数必须用对象或者接口形式传递，否则参数变化了，视图不更新
  172.               this.buildCommentList({commentList:aItem.replyList})
  173.             }
  174.           }.layoutWeight(1)
  175.           .alignItems(HorizontalAlign.Start)
  176.           .margin({left:size.pagePadding})
  177.           .onClick(this.useReply.bind(this,aItem,aIndex))
  178.         }
  179.         .justifyContent(FlexAlign.Start)
  180.         .alignItems(VerticalAlign.Top)
  181.         .width('100%')
  182.       })
  183.     }
  184.   }
  185.  
  186.   build(){
  187.     Column(){
  188.       Text(`${this.commentTotal}条评论`)
  189.         .padding(size.pagePadding)
  190.         .textAlign(TextAlign.Center)
  191.         .border({
  192.         width: { bottom: 1 },
  193.         color: { bottom: colors.borderColor },
  194.         style: { bottom: BorderStyle.Solid }
  195.       }).width('100%')
  196.       Scroll(this.scroller) {
  197.         if(this.commentList.length > 0) {
  198.           // 必须用对象的方式传递，否则this.commentList发生变化之后，视图不会更新
  199.           this.buildCommentList({commentList:this.commentList})
  200.         }else{
  201.           Text('暂无评论')
  202.             .width('100%')
  203.             .height('100%')
  204.             .textAlign(TextAlign.Center)
  205.             .alignSelf(ItemAlign.Center)
  206.         }
  207.       }
  208.       .scrollable(ScrollDirection.Vertical)
  209.       .layoutWeight(1)
  210.       .align(Alignment.Top)
  211.       .padding(size.pagePadding)
  212.       if(!this.commentListStr){
  213.         Divider().height(1).color(colors.borderColor)
  214.         this.buildCommentInput()
  215.       }
  216.     }.width('100%').height('100%')
  217.   }
  218. }

实现效果如下：

github地址：https://github.com/wuyuanwuhui99/Harmony-arkts-movie-music-app-ui

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/789998
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号