前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React强制刷新组件的一种方式

React强制刷新组件的一种方式

作者头像
挥刀北上
发布2022-11-11 17:29:54
5.3K0
发布2022-11-11 17:29:54
举报
文章被收录于专栏:Node.js开发

开发项目时发现有这样一个需求,先看页面:

点击获取数据按钮会加载赛事列表,列表中的操作项分为多个组,组数据是根据对应比赛的id获取的,从而渲染出来的按钮。

可以看一下network的http请求:

第一个请求是请求列表信息,后面三个请求,是每场比赛根据id去请求场次。

请求结果分别为:

我将渲染分组按钮封装成了一个组件代码结构如下:

红色标记的就是根据id加载场次的组件,代码结构为:

主要逻辑就是根据id去请求场次然后渲染。

这里面有一个bug,我试着描述一下:当第一次加载比赛列表后,此时后端操作人员发现场次编排错误,增加或减少了场次,而这时前端重新请求,子组件

EventSessionButton不会更新,观察该组件,发现传入的参数id值并未发生变化,所以组件不会重新渲染,怎么办呢?

我想到了再传递一个参数,这个参数叫做stemp,嗯没错,就是一个时间戳,在父组件中定义,父组件每次刷新,都会传递一个新的stemp值,此时EventSessionButton因为props中的stemp每次发生了变化,所以组件就会更新。

父组件中的代码:

子组件中的代码:

stemp发生变化,组件机会更新。

以上便是利用useEffect函数依赖数据重载的机制实现了子组件强制刷新的目的,希望对你有所帮助

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 nodejs全栈开发 微信公众号,前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档