productList组件代码

老师，productList函数式组件这一块的代码我的理解感觉很混乱，我自己尝试理解了好几遍，但还是不是很明白。烦请老师指点一下（尤其是onPageChange 分页处理那一块的代码，看不太懂），麻烦老师了！非常感谢！

qq_宝慕林8034856 2022-04-01

源自：项目：React旅游网 5-9 【综合运用】搜索页面

13

收起

1回答

好帮手慕慕子 2022-04-01 10:40:41

同学你好， productList组件中，主要是利用antd插件提供的List组件将数据展示到页面，参考antd官方文档，传入对应的参数即可，示例：

List组件中添加pagination属性，对应分页的配置项，https://ant.design/components/list-cn/ 如下：

pagination的详细配置介绍中可知，onChange是antd提供好的方法，传入的参数是改变后的页面和每页条数，如下：

Searchpage.tsx中定义的onPageChange方法，也就是传入productList组件中方法，页数改变时调用该方法，内部通过dispatch触发searchProduct，根据传入的参数（改变后的页数，页面条数，以及关键字）获取到新的数据

祝学习愉快~

提问者 qq_宝慕林8034856 #1

谢谢老师，明白了！之前一直不知道 && 是什么意思，现在老师一解释，就理解了。谢谢老师！！

2022-04-01 10:43:21
提问者 qq_宝慕林8034856 #2

onChange: (page) => onPageChange && onPageChange(page, paging.pageSize)
老师，那这一行代码中 && 前的onPageChange 可以省略，直接写成onChange: (page) => onPageChange(page, paging.pageSize) 么？这个组件中不是已经传入了 onPageChange函数么，只要检测页面变化，调用onPageChange来dispatch action, 为什么还要先判断onPageChange是否存在呢？

2022-04-01 10:50:46
好帮手慕慕子回复提问者 qq_宝慕林8034856 #3

同学你好，可以省略，但是为了代码的严谨性，推荐加上，防止其他人调用该组件时，忘记或者不知道要传该方法，代码报错。
祝学习愉快~

2022-04-01 10:52:21

点开查看后面1条评论

相似问题

老师，引用 ProductList 组件之后报错

for(let i in productList)中的i指的什么？

自定义组件问题

这个小程序课程不讲组件

老师代码报错啊

登录后可查看更多问答，登录/注册

前端工程师

参与学习人
提交作业 15697 份
解答问题 17883 个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

本课精华内容

问答作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载