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 删除。

评论
登录后参与评论
暂无评论
推荐阅读
页面一打开就有30个重复请求,我要怎么优化?
上周测试同事给我提了个bug。他说在公司运营系统某个编辑页面中,一个post请求调用太多次了,想让我看看怎么回事。我刚听他讲这个事情时心里有点不屑一顾,觉得能有多少次啊,大惊小怪的。然而当我在测试环境中打开那个页面一看,直呼好家伙!这个页面调用了30次相同的请求,属实有点离谱的!
前端老道
2023/09/01
2230
页面一打开就有30个重复请求,我要怎么优化?
React组件设计实践总结02 - 组件的组织
一个复杂的应用都是由简单的应用发展而来的, 随着越来越多的功能加入项目, 代码就会变得越来越难以控制. 本文章主要探讨在大型项目中如何对组件进行组织, 让项目具备可维护性.
_sx_
2019/08/07
2K0
React组件设计实践总结02 - 组件的组织
WordPress 网站开发“微信小程序”实战(五)
本站WordPress +“微信小程序”实战系列文章已经到了第五篇,这次记录的是“DeveWork极客”小程序v2.0 的更新。2.0 版本在UI 上改动不大,但是“内核”却做了大改动——这些改动旨在提升小程序运行速度及降低性能消耗。 如果你没有看过本小程序,可以通过下面的小程序码进入体验。注意看文章的此时你扫码进入的版本可能不是2.0 版本了。 image.png 还是一样,如果你是第一次看本系列文章,建议先过目之前的文章: 《WordPress 网站基于REST API 开发“微信小程序”实战》 《W
Jeff
2018/01/22
2K0
WordPress 网站开发“微信小程序”实战(五)
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由composition api带出来的概览,而composition api(组合api) 和 optional api(可选api) 两种组织代码的方式,相信大家在vue3各种相关的介绍文里已经了解到不少了,它们可以同时存在,并非强制你只能使用哪一种,但组合api两大优势的确让开发者们更倾向于使用它来替代可选api。
腾讯新闻前端团队
2021/08/19
3.2K1
setup vs 5 react hooks,助你避开"沟"中陷阱
微信小程序文档学习笔记
目录结构 1.为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。
治电小白菜
2020/08/25
1.3K0
微信小程序文档学习笔记
小程序学习笔记
 一、小程序文档笔记 默认开发目录 开发目录解析 1.  app.js、app.json、app.wxss 这三个文件必须有不能删掉。 一个小程序主体部分由这三个文件组成,而且必须放在项目的根目录
xing.org1^
2018/05/17
2.5K0
docsify的配置+全插件列表
本篇文章来自好友肥子哥,原文连接:https://xhhdd.cc/index.php/archives/80/
星橙
2022/11/28
8.3K2
docsify的配置+全插件列表
uni-app 结合云函数开发小程序博客(三):接入云函数,实现完善的列表刷新机制
因为项目做的是博客demo, 首页进来想给人直观的就能看到文章,看到分类。所以想的一个是可以左右滑动,切换分类,一个是页面以列表形式,直接 list 渲染。类似掘金的样式:
一只图雀
2020/05/20
4.3K0
《腾讯大家》小程序开发总结
《腾讯大家》是公司推出的中文互联网专栏写作服务产品。由于寻找有效信息的成本是非常大的,一些真正具有传播价值的内容,却往往淹没于信息洪流之中。如何将最有价值的信息以最快的速度呈现给用户,正是《大家》产品设计的初衷。《大家》更关注互联网用户更深入、更持久的思考与表达。我们希望呈现给用户的,是经得起时间考验的文章,是时代最前沿的思想。它的表现,可能是一个专栏、一部电子书、一个属于个人的频道,甚至是一款小程序。
JoanLiu
2018/11/15
2.3K1
最新最全的云开发入门教程,微信小程序云开发,云函数,云数据库学习,微信小程序云开发扩展功能学习
https://edu.csdn.net/course/detail/26572
全栈程序员站长
2022/08/14
1.9K0
最新最全的云开发入门教程,微信小程序云开发,云函数,云数据库学习,微信小程序云开发扩展功能学习
VUE学习笔记
CSS 层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,它主要缺陷如下:
全栈程序员站长
2022/06/30
1.3K0
VUE学习笔记
虾皮、OPPO、富途等十几家公司面经总结
本文来自作者@几米阳光 投稿 原文链接:https://juejin.cn/post/6991724298197008421
Nealyang
2021/09/03
9120
一个合格的中级前端工程师需要掌握的技能笔记(下)
Github来源:一个合格的中级前端工程师需要掌握的技能 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者
达达前端
2021/10/09
1.7K0
一个合格的中级前端工程师需要掌握的技能笔记(下)
前端开发日常工作每日记录笔记(2019至2024合集)
从2019年开始,在工作之余会主动记录一些东西,像每天遇到的问题、感想和学到的新的知识点,后面搭建了博客又开始写博客,也整理和记录了很多的笔记。
人人都是码农
2025/04/06
2450
前端开发日常工作每日记录笔记(2019至2024合集)
点亮你的Vue技术栈,万字Nuxt.js实践笔记来了
作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮。
WahFung
2020/08/24
24.3K0
点亮你的Vue技术栈,万字Nuxt.js实践笔记来了
【Hybrid开发高级系列】WebPack模块化专题
        如今,越来越多的JavaScript代码被使用在页面上,我们添加很多的内容在浏览器里。如何去很好的组织这些代码,成为了一个必须要解决的难题。
江中散人_Jun
2023/10/16
4480
【Hybrid开发高级系列】WebPack模块化专题
前端开发日常工作每日记录笔记(2019至2024合集)
从2019年开始,在工作之余会主动记录一些东西,像每天遇到的问题、感想和学到的新的知识点,后面搭建了博客又开始写博客,也整理和记录了很多的笔记。
人人都是码农
2025/04/04
1100
相亲对象告诉你他的相亲史_时间让我看懂一切
注:本文,来自csdn论坛的觉的楼主写的不错,所以就引用过啦了,别介意哦,http://topic.csdn.net/u/20100624/16/80f263ca-b05f-456f-bf5f-9d87dd78a6f9.html,作者:NewJacket (这个真不是马甲)
全栈程序员站长
2022/11/08
3.3K0
笔记 | Xamarin
所有 Android 应用都必须在 AndroidManifest.xml 中为外部存储声明两个权限之一。
yiyun
2022/04/01
24.5K0
笔记 | Xamarin
Java面试宝典2017版
一. Java基础部分…………………………………………………………………………………….. 7
全栈程序员站长
2022/09/14
5030
推荐阅读
相关推荐
页面一打开就有30个重复请求,我要怎么优化?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档