React 表格内自定义组件不进行实时更新，采用更新key方式实时更新组件，以及直接变更开关 defaultChecked 为 checked 状态实现表格组件更新

最新推荐文章于 2024-04-18 10:00:00 发布
最新推荐文章于 2024-04-18 10:00:00 发布
阅读量1.4k 收藏 7
点赞数 8
分类专栏： 前端 react 文章标签： react.js vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clli_chain/article/details/120821576
版权
前端 同时被 2 个专栏收录
52 篇文章 2 订阅
订阅专栏
react
11 篇文章 0 订阅
订阅专栏
本文探讨了在React中遇到的表格组件更新问题。通过使用useState来改变表格数据时，发现组件并未随之更新。解决方法包括：1) 使用组件的key属性，当key值变化时强制组件重新渲染；2) 将defaultChecked替换为checked，以监听并响应数据变化。这两种方法能确保表格数据更新时，组件状态同步。
摘要由CSDN通过智能技术生成

文章目录

一、使用useState变更表格数据，表格内的开关组件并不会更新组件？

在这里插入图片描述
首先我们可以看一下代码，我在这边是采用的 defaultChecked ，也就是组件初次的默认值进行数据变更
在这里插入图片描述
但是不免得会有一个问题就是，表格内的组件只在第一次加载时是对的，当我变更完数据，更新列表时，表格内的自定义组件并不会随着表格的更新而去销毁而更新，也就导致了数据更新了 但是开关并不会变更的问题

二、使用组件唯一 key 实现每刷新一次表格，key值都会变更，从而实现组件更新的功能。

首先我们要知道的是 每一个组件都可以有一个唯一的 key 值，那么关于这个 key 值，通常大家把他看成是diff快速查找对比差异的一个唯一值，同样的我们也可以利用这个唯一值去做一些组件更新，因为默认的 diff 会将一个与上次对应对比的组件 key 值不等的话 当做是一个新组件。
在这里插入图片描述
定义的 1000 基数，防止重复
在这里插入图片描述
每次触发开关变更事件时，重新获取表格数据
在这里插入图片描述
每次更新表格时就会触发 key 值 +1 从而实现组件更新
在这里插入图片描述

三、变更 defaultChecked 为 checked 实现自定义组件的监听更新。

在这里插入图片描述
在这里插入图片描述
以上，也就是两种在表格中使用组件实现更新组件数据的方式

归来巨星
关注
专栏目录
基于 React hooks + Typescript + Cesium 实现轨迹回放功能组件
jiegiser博客
12-01 708
功能介绍 本例子基于 react hooks + ts + Cesium 实现轨迹回放功能；实现播放、暂停、重新回放、设置回放速度、是否显示轨迹、是否跟踪等功能。并封装对应的 TrajectoryComponent 组件。 先上截图： 后续将分享一些下面的功能： 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量 坐标拾取 加载模型数据，实现属性查询 地下模式 单体化 粒子特效 视频融合 有其他需要实现的功能，大家可以评论哈 实现思路 获取数据并处理数据 首先需要获取我们轨迹回放
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1236
antd-react 组件库工作以来的总结
ReactJS修炼之路（二）：组件的key
沉淀
01-14 1万+
一，概要在同系列的上一篇博客React修炼之路（一）里，我第一次接触组件key这个概念,因为不理解key的用处及不清楚React组件的更新机制而遇到父级组件调用了render函数而render内的子组件内容不更新的问题。在React修炼之路（一）里我在子组件里使用了componentWillReceiveProps方法，实现了内容更新，具体内容参见上一篇博客。最近又看了一些资料，同时实践得更多，对这
React input输入相关：受控方式无法更新对象类型数据（函数式组件 useState）
qq_51574759的博客
12-29 765
这个问题的关键其实我们都知道：**state不能通过直接赋值的方式修改，这也是我们为什么要解构出setUserInfo的原因** 到这里你可能很疑惑，我是用的`setUserInfo`呀？ 但是看上面传入`setUserInfo`中的函数，传入函数是为了解决需要用到之前的state值的需求，这个`pre`就是之前的 state，可是在这个函数中，却直接使用了`pre.account = e.target.value`这样的形式，**用 = 给一个 state 赋值了！** 既要获取之前的state值，
react Table组件更改dataSource表格不更新
weixin_69903461的博客
06-28 761
是因为里面数据为引用类型，表格未发现地址进行改变了，所以只需要在setState 的时候，用扩展运算符进行拷贝就行啦。
ElementUI el-tree default-checked-keys动态改变
Avery233的博客
06-15 2635
通过调用setCheckedKeys方法来改变elementUI el-tree选中状态
vue2动态改变default-checked-keys
qq_70032585的博客
12-11 499
修改了default-checked-keys，但是页面没有发生变化。第一步：给el-tree添加ref="areaTrees"
React基础 | 笔记 | （更新中）
weixin_63637469的博客
07-05 287
前端小菜鸟react学习笔记，希望能够帮助到大家
react入门—实现复杂表单方法的封装以及表单验证功能的实现（表单验证方法的封装优化）
weixin_45745641的博客
03-11 1449
文章目录前言复杂表单页面的实现表单验证方法 前言 在前端开发中，表单验证是很常见的功能，这边文章就来讲一下react入门实现复杂表单的功能，以及表单验证功能的实现 复杂表单页面的实现 实现一个表单页面，包含输入框，单选框和下拉框，点击提交能够拿取输入的数据 1.首先定义我们的非受限组件Hello，并在state中定义我们需要用到的变量： class Hello extends React.Component { state = { name: '',
React类式组件TodoList案例
m0_56598099的博客
09-21 437
——某个组件使用：放在其自身的state中 ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能使用组件的方法setCurrentKey来实现。想直接绑定数据来的方便，只能修改源码。在tree的源码 属性中重新定义一个属性，在watch中监听，调用 this.store.setCheckedKeys()。以下是作者修改的代码，第一次写博客分享给大家，不喜勿碰，还望更多大神多多指教。 props: { ..... pCheckedKeys: Array, .
antd中Checkbox的defaultChecked动态改变
juju4的博客
03-15 1730
antd中Checkbox的defaultChecked动态改变 最近有一个需求，就是defaultChecked的初始数据从接口拿，不同的会话里初始数据不同，且可以通过方法修改当前checked是否为true，找了很多方法想通过js控制checked，但都不行。 最后发现，可以直接加key，因为Checkbox只在最开始获取defaultChecked，后面如果修改defaultChecked，Checkbox无法检测到改变，但加上key了后，就可以了. <Checkbox onChange={(
React中为什么要给组件设置key？
最新发布
alive_new的博客
04-18 568
在处理列表（list）和数组（array）时，组件的状态可能会发生变化，React需要知道如何更新视图以匹配最新的状态。在React中，key属性是一个特殊的属性，用于标识列表中的元素。这里的key是item.id，它是列表中每个项目的唯一标识符。例如，如果两个元素使用了相同的key，React会认为它们是同一个元素，这可能会导致意外的行为。保持状态：在列表中，如果组件的状态或子组件的状态需要在列表更新时保持不变，key可以帮助React识别哪些元素是新的，哪些元素是旧的，从而保持这些状态。
react面试总结
夏至
10-28 304
1.状态(state)和属性(props)之间有何不同 State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。 Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递 2.
React中利用 key 实现组件重新渲染
yujin0213的博客
08-02 8245
最近在项目实践中，发现react中可以利用key实现子组件的重新渲染，具体场景如下：需要切换下拉菜单时，对应的榜单也要替换成该轮的数据 具体代码如下 render() { let {round, sid} = this.state; //round表示选中的菜单的索引 return ( <div className="record-wrap"> ...
el-tree通过default-checked-keys动态默认选中某节点
weixin_67898309的博客
04-11 2137
el-tree树节点默认选中
el-tree中default-checked-keys属性变化不生效
热门推荐
monparadis的博客
02-25 1万+
前言：使用element-ui中tree组件时，天真的以为只要动态修改default-checked-keys这个属性值得变化，默认勾选的值也会随之变化，实际发现并不是这样的 我们先看看官网上对default-checked-keys的定义：（看完依旧觉得没问题） 于是我就去探寻了一下原因是啥： 原因是：tree.vue中使用watch监听default-checked-keys值得变化，调用了以下方法 在tree-store.js中又使用了此方法 终于知道原因了，发现只有监听到def
关于element-ui tree树形控件中:default-checked-keys的问题
DarkHorseK的博客
10-14 1万+
今天在使用element-ui中的tree控件时,我想要默认选中角色拥有权限的复选框时,发现即使改变了:default-checked-keys,也不能改变渲染结果,需要调用this.$refs.tree.setCheckedKeys 方法来改变选中状态. <el-dialog title="提示" :visible.sync="setRightsDialogVisi...
:key 强制更新组件，用于解决组件缓存问题
qq_46302247的博客
08-18 242
//点击“计划奖励”调用 planReward() 函数 <el-button type="text" @click="planReward(scope.row)">计划奖励</el-button> //使用planReward组件（组件内是一个dialog弹窗） <plan-reward :rewardData="rewardData" :couponData="couponData" :key="keyTime" :dialogFormVisible="dialog.
React ProTable表格实时更新数据用函数组件ts怎么实现
05-05
在函数组件中实现实时更新数据可以使用React Hooks中的useState和useEffect。 首先，定义一个state用来存储表格数据，使用useState初始化为空数组： ```typescript const [tableData, setTableData] = useState([]...
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值