Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Taro中的一个父组件中map渲染子组件列表的时候,问题

Taro中的一个父组件中map渲染子组件列表的时候,问题

原创
作者头像
耙耳朵
修改于 2020-06-11 09:31:29
修改于 2020-06-11 09:31:29
2.1K0
举报
文章被收录于专栏:taro-reacttaro-react

其实问题还是自己想偷懒而且不注意导致的,可以说是小程序页面和组件的界限

我们在开发的时候,组件和页面一定要分开,如果是组件的话,就一定不要当成页面组件在pages中配置,就拿列表组件来说

场景:我一个列表,我想单独展示成一个页面,但是又想在带有tab筛选的时候当成一个局部组件,所以偷懒了!

这样就导致了首次渲染数据空白!!!!但是在开发者工具看的时候,其实数据已经是有的,百思不得其解啊,于是就放弃了,差不多首次就是这样

首次渲染的时候
首次渲染的时候

可以看到,appData中数据是正常的,但是第一次的map展示就是有问题,值出不来,点击了上面的tab之后就又正常了

我们可以看看代码。就是简单的react 列表渲染一个子组件

看下面的这个列表循环
看下面的这个列表循环

于是.......过了十天

我还是放不下!因为我觉得没啥问题啊,于是我回去了

我想着新开一个页面吧,然后就去配置pages,忽然我发现了这么一行代码!!!!【灵机一动,会不会是小程序中页面和组件之间的边界出了问题呢】

我就去掉了

配置中pages把goods-item也加进去了
配置中pages把goods-item也加进去了

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
OpenHarmony 实战开发——使用分布式菜单创建点餐神器
随着社会的进步与发展,科技手段的推陈出新,餐饮行业也在寻求新的突破与变革,手机扫描二维码点餐系统已经成为餐饮行业的未来趋势,发展空间巨大;扫码点餐,是“互联网+餐饮”潮流的产物,可以有效地为餐厅节省人力成本,提高顾客点餐用餐效率,节省顾客时间,提高餐厅翻台率。
小帅聊鸿蒙
2025/04/10
720
OpenHarmony 实战开发——使用分布式菜单创建点餐神器
OpenHarmony标准设备应用开发(二)——布局、动画与音乐
本章是 OpenHarmony 标准设备应用开发的第二篇文章。我们通过知识体系新开发的几个基于 OpenHarmony3.1 Beta 标准系统的样例:分布式音乐播放、传炸弹、购物车等样例,分别介绍下音乐播放、显示动画、动画转场(页面间转场)三个进阶技能。首先我们来讲如何在 OpenHarmony 中实现音乐的播放。
小帅聊鸿蒙
2025/04/09
1120
OpenHarmony标准设备应用开发(二)——布局、动画与音乐
OpenHarmony标准设备应用开发实战(一)——HelloWorld
3. 安装应用到标准设备上面。下面就让我们从零开始学习 OpenHarmony 标准设备应用开发。
小帅聊鸿蒙
2025/04/08
1380
OpenHarmony标准设备应用开发实战(一)——HelloWorld
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,它允许开发者在任意方向上对元素进行排列,并且可以动态地调整元素的大小和位置,以适应不同的屏幕尺寸和设备。Flex布局是响应式设计的关键工具,它提供了一系列的属性来控制子组件的排列和对齐方式。
淼学派对
2024/11/12
3320
【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发三
绘制组件封装了一些常见的基本几何图形,比如矩形Rect、圆形Circle、椭圆形Ellipse等,为开发者省去了路线计算的过程。
枫叶丹
2025/01/18
1340
【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发三
基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷(上)
HarmonyOS ArkUI 3.0 框架试玩初体验二来了||ヽ( ̄▽ ̄)ノミ|Ю,这一次相比上一次的 合成1024开发实战,多了部分内容:显示动画、页面跳转与数据传递、网格容器Grid、自定义窗口等内容。本来想做成分布式HarmonyOS ArkUI 3.0木棉花扫雷的,但是苦于没有相应API版本的分布式模拟器或多台真机用于调试和运行,只能落得个单机的尴尬实战了 ̄□ ̄||
程序员小顾
2021/12/04
7460
ArkUI框架开发-ImageKnife渲染层重构
●支持用户配置参数使用:(例如:配置是否开启一级内存缓存,配置磁盘缓存策略,配置仅使用缓存加载数据,配置图片变换效果,配置占位图,配置加载失败占位图等)。
小帅聊鸿蒙
2025/04/28
580
ArkUI框架开发-ImageKnife渲染层重构
ArkUI实战开发-页面跳转(Router、Ability)
页面跳转可以分为页面内跳转和页面间跳转,页面内跳转是指所跳转的页面在同一个 Ability 内部,它们之间的跳转可以使用 Router 或者 Navigator 的方式;页面间跳转是指所跳转的页面属与不同的 Ability ,这种跳转需要借助 featureAbility 实现,跳转示意图如下所示:
小帅聊鸿蒙
2024/10/08
3290
ArkUI实战开发-页面跳转(Router、Ability)
OpenHarmony/HarmonyOS中Stack,Flex布局的使用
本示例为构建了简单页面展示食物坚果的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
徐建国
2023/08/10
5350
OpenHarmony/HarmonyOS中Stack,Flex布局的使用
【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发二
学习ArkTS语言ArkTS是HarmonyOS优选的主力应用开发语言,当前,ArkTS在TS基础上主要扩展了声明式UI能力。开发页面
枫叶丹
2025/01/15
1740
【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发二
鸿蒙开发实战案例--朋友圈
先看项目结构,本项目所有代码都在Index.ets文件下,图片资源在image文件夹和resources下的media文件下都有分布。
小帅聊鸿蒙
2024/07/23
1090
鸿蒙开发实战案例--朋友圈
【愚公系列】2022年01月 华为鸿蒙OS-03-四种模式开发实操
这两种方式创建出的布局没有本质差别,但是XML方式较为方便简单,以后开发中,也都是用XML布局的方式。但是这两种方式都需要我们熟悉。所以,所以我们将通过XML的方式布局第一张页面,然后再通过代码的方式布局第二张页面。
愚公搬代码
2022/01/21
5390
【愚公系列】2022年01月 华为鸿蒙OS-03-四种模式开发实操
鸿蒙应用开发-初见:ArkUI
Flutter中Widget的布局原理如下图所示。想了解更多Flutter的布局原理可以查看 深入理解 Flutter 布局约束
小帅聊鸿蒙
2024/06/15
3420
鸿蒙应用开发-初见:ArkUI
38.HarmonyOS NEXT Layout布局组件系统详解(五):对齐方式设置
在HarmonyOS的Layout布局组件系统中,对齐方式是一个重要的布局特性,它可以控制列在行内的水平对齐和垂直对齐。本文将详细介绍Layout布局组件系统中的对齐方式设置,包括水平对齐和垂直对齐的实现原理和使用方法。
全栈若城
2025/03/12
1440
【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发之常见布局
线性布局(LinearLayout)是开发中最常用的布局。线性布局的子组件在线性方向上(水平方向和垂直方向)依次排列。
枫叶丹
2025/01/20
2760
【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发之常见布局
鸿蒙食物详情页案例实战
Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
徐建国
2023/12/28
2140
鸿蒙食物详情页案例实战
HarmonyOS 开发实践 —— 原生应用占用空间管理
1.可以通过storageStatistics.getCurrentBundleStats接口获取缓存大小。
小帅聊鸿蒙
2024/12/11
770
HarmonyOS 开发实践 —— 原生应用占用空间管理
HarmonyOS-UIAbitity-Radio——【坚果派-红目香薰】
Radio(options: {value: string, group: string})
红目香薰
2024/02/03
1060
HarmonyOS-UIAbitity-Radio——【坚果派-红目香薰】
一个小决定Demo带你快速了解掌握鸿蒙ArkUI的基本使用
打开 DevEco Studio,点击 File ==> New ==> Create Project,在 Choose Your Ability Template 下选择模板"Application",选中 Empty Ability 模板,点击 Next 进入下一步配置。
心安事随
2024/08/09
3910
一个小决定Demo带你快速了解掌握鸿蒙ArkUI的基本使用
简单3步,OpenHarmony上跑起ArkUI分布式小游戏
标准系统新增支持了方舟开发框架(ArkUI)、分布式组网和 FA 跨设备迁移能力等新特性,因此我们结合了这三种特性使用 ets 开发了一款如下动图所示传炸弹应用。
小帅聊鸿蒙
2024/09/11
1670
简单3步,OpenHarmony上跑起ArkUI分布式小游戏
推荐阅读
相关推荐
OpenHarmony 实战开发——使用分布式菜单创建点餐神器
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档