【HarmonyOS NEXT】父组件中的arr更新后，子组件监听到并且输出了日志，但是子组件中的数据没渲染更新

最新推荐文章于 2024-09-30 09:25:50 发布
最新推荐文章于 2024-09-30 09:25:50 发布
阅读量324 收藏 2
点赞数 1
文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mayism123/article/details/140689388
版权

【关键字】

父组件 / 子组件 / 更新 / 渲染 / 监听

【问题描述】

子组件为TextVerticalList，父组件为PriorityRelease，父组件中的arr更新后，子组件监听到并且输出了日志，但是子组件中的数据没渲染更新。

【解决方案】

可以使用@Observed装饰器和@ObjectLink装饰器，来监听刷新嵌套类对象属性变化。

参考链接如下：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5

针对触发子组件更新的通过ForEach可以解决，但是使用LazyForEach就不行的问题，应该是LazyForEach有一定的使用限制导致的，例如LazyForEach在每次迭代中，必须创建且只允许创建一个子组件。

具体使用限制参考链接如下：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-lazyforeach-V5#%E4%BD%BF%E7%94%A8%E9%99%90%E5%88%B6

Mayism123
关注
【HarmonyOS NEXT】列表渲染异常，Intl接口报错
Mayism123的博客
02-08 382
音频播放应用在4.1.3.5 版本x5设备和204.1.0.33版本NOH-AN00设备上，列表渲染异常，hilog日志报错信息显示Intl接口发生错误。使用@ohos.intl (国际化-Intl)接口，代码的引用头文件需要import Intl from '@ohos.intl'。其中：dateStyle这个参数会和年月日时分秒的单独设置冲突，建议去掉。代码也需要修改一下，请参考这个文档修改。列表渲染 / Intl接口 / 国际化。
鸿蒙arkts foreach循环组件，数组更新，组件没有同步更新
WYJAVAC的博客
06-20 314
State listData:Array=[]
鸿蒙Harmony应用开发—ArkTS-ForEach：循环渲染
m0_64420071的博客
03-23 2643
ForEach基于数组类型数据执行循环渲染。
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 二）
爱吃土豆丝的打工人的博客
07-27 1671
Prop变量允许在本地修改，但修改后的变化不会同步回父组件。当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值，而在父组件中对应的@State装饰的变量被修改后，子组件本地修改的@Prop装饰的相关变量值将被覆盖。
鸿蒙forEach循环构建列表，数据项属性变更UI不更新终极解决办法
qq_46083263的博客
05-17 888
允许你读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。如果尝试访问的属性不存在，表达式将短路并返回。像界面出现异步等问题，出现报错read img_url of undefined 可以用?重新构建每一项的对象是关键，不然改变属性不会更新界面。，而不是抛出一个错误。
【HarmonyOS NEXT】使用LazyForEach，父组件中arr更新后，子组件中的数据没渲染更新
Mayism123的博客
07-18 439
子组件为TextVerticalList，父组件为PriorityRelease，父组件中的arr更新后，子组件监听到并且输出了日志，但是子组件中的数据没渲染更新。触发子组件更新的通过ForEach可以解决，但是使用LazyForEach就不行。为什么用LazyForEach不行？LazyForEach有一定的使用限制导致的，例如LazyForEach在每次迭代中，必须创建且只允许创建一个子组件。子组件 / 父组件/ arr更新 / 渲染未更新 / ForEach / LazyForEach。
HarmonyOS鸿蒙应用开发( 四、重磅组件List列表组件使用详解)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-23 6561
List列表组件，是一个非常常用且重要的组件。可以说在一个应用中，它的身影无处不在。它包含一系列相同宽度的列表项，适合连续、多行呈现同类数据，例如图片列表和和文本列表等。ArkUI 框架采用 List 容器创建列表（类似 Android 的 RecycleView、Compose 的 LazyColumn）。
鸿蒙HarmonyOS NEXT开发：组件可见区域变化事件（ArkTS组件事件）
shudaoshanBBQ的博客
08-06 760
组件可见区域变化事件是组件在屏幕中的显示区域面积变化时触发的事件............
【鸿蒙HarmonyOS NEXT】List组件的使用
若兰幽竹
09-03 1246
List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。List组件通常需要搭配如ForEach组件对ListItem组件进行循环渲染。List组件子组件ListItem之间默认是没有分割线的，部分场景子组件ListItem间需要设置分割线，这时候您可以使用List组件的divider属性。，您可以将List组件的。
002 学习鸿蒙应用开发ArkTs语言
龚礼鹏的博客
04-19 1万+
ArkTs是目前鸿蒙开发的主要语言，目前鸿蒙的主推模型Stage的新版本(3.1.0(API 9))开发不支持Java和JavaScript了，所以开发鸿蒙应用学习ArkTs是很有必要的。5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集。
react生命周期和兄弟组件之间的传值
weixin_45801321的博客
06-28 258
react声明周期 计算机中的同步异步 setSate 造成的异步现象 兄弟组件之间的通信
Java中高级面试题总览(一)
热门推荐
击水三千里的专栏
03-29 2万+
高频面试题深入剖析
【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
qq_48687155的博客
07-26 556
动态组件，插槽，自定义指令，tabbar案例
Vue-数据驱动视图（一）数据监听机制
秋水惊鸿的博客
05-08 1324
前言 Vue的一大特点就是数据双向绑定，当数据发生变化时，也可以同时触发界面的变化，即数据驱动视图。要想实现数据驱动视图，那么有这么几个步骤： 1.收集我们需要监听的数据，并给他配置个监听器，当数据状态发生变化时触发监听器，然后判断是否需要重新渲染； 2.数据变更时重新构建虚拟DOM； 3.虚拟DOM渲染成为真实的DOM； 在这里本文主要分析其中的第一步——数据监听机制，也就是Data变化到watcher监听到的这一过程。 正文 一、Object的数据响应机制 Vu...
鸿蒙NEXT开发-自定义构建函数（基于最新api12稳定版）
qq_56760790的博客
09-28 1180
鸿蒙自定义构建函数的学习包含了：构建函数的基本介绍、传参传递、尾随闭包等
2024年10月HarmonyOS应用开发者高级认证全新题库
最新发布
qq_56760790的博客
09-30 2736
2024年10月HarmonyOS应用开发者高级认证全新题库，注意事项：切记在考试之外的设备上打开题库进行搜索，防止切屏三次考试自动结束，题目是乱序，每次考试，选项的顺序都不同新版题库：单选题40题 多选题20题 注意选项答案顺序不一样，大家记得看选项后面的值是否一样。
鸿蒙NEXT开发-界面渲染（条件和循环）（基于最新api12稳定版）
qq_56760790的博客
09-28 515
鸿蒙界面渲染的学习包含了：条件渲染和循环渲染
将子组件中的props数组数据赋值给data
06-02
如果你需要在子组件中修改父组件传递过来的数组类型的props，你可以将props数组数据赋值给子组件的data属性，然后在子组件中修改data属性的值，示例如下： ```html <template> <div> <ul> <li v-for="item in myArr" :key="item">{{ item }}</li> </ul> <button @click="addItem">添加数据</button> </div> </template> <script> export default { props: { myArr: { type: Array, default: () => [] } }, data() { return { arr: this.myArr // 将props中的数组数据赋值给子组件的data属性arr } }, methods: { addItem() { this.arr.push(4) // 修改子组件的data属性arr } } } </script> ``` 在子组件中，将props中的数组数据赋值给子组件的data属性arr，在子组件中修改arr的值，不会影响到父组件的数据。需要注意的是，如果父组件修改了props中的数据，子组件中的data属性arr不会自动更新，需要使用watch监听props中的数据变化，并手动更新子组件中的data属性值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值