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

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

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

可以看一下network的http请求：

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

请求结果分别为：

和

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

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

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

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

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

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

父组件中的代码：

子组件中的代码：

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

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