React响应式数据更新踩坑-Table表头不刷新

React响应式数据更新踩坑

背景

在用户流程结束之后,需要一个类似可编辑表格的界面填写用户评价,用于收集用户使用感受和意见。

但在编写代码的时候发现,UI界面数据更新,响应式数据也随之更新之后,界面并没有重新渲染,导致用户没办法输入任何东西,但是devTool上log输出却是正确的。

主要功能

可编辑表格

使用技术栈

React:17.0.2 - 类组件

antd:4.16.13

解决

当响应式数据为对象数组的时候,浅层拷贝没办法触发React更新,需要深拷贝。

代码实现

仅仅贴出主要代码

DOM

jsx 复制代码
...
<Table
  dataSource={this.state.replyDataTable}    
  columns={this.replyColumns}
  ...
/>
...

JS

  • 表头配置
jsx 复制代码
replyColumns = [
    ...
    {
        title: "满意度评价,
        dataIndex: "MATCH_CASE",
        render:(text,row,index) => (
    	<Rate
            onChange={val => this.handleRateChange(val,index)}
            value={this.state.replyDataTable[index].MATCH_CASE}
        />
    )
    }
]
  • 当用户编辑时,触发更新
jsx 复制代码
handleRateChange = (val, index) => {
    const {replyDataTable} = this.state;
    // 错误做法:浅拷贝, 无法触发render
    // const _replyDataTable = [...replyDataTable]
    // 正确做法:深拷贝
    const _replyDataTable = JSON.parse(JSON.stringify(replyDataTable));
    _replyDataTable[index].MATCH_CASE = val;
    this.setState({
        replyDataTable: _replyDataTable,
    })
    
}

反思

  1. 在进行更新响应式数据时,要重新拷贝一份引用
  2. 让我想起了vue2的$set

Vue.js 的响应式系统在初始化时会对数据对象进行递归遍历并设置 getter 和 setter,以便在属性被访问和修改时触发更新。但是,对于已经存在的属性和索引,Vue.js 在初始化时已经设置了 getter 和 setter,因此能够追踪它们的变化。然而,对于新增的属性或索引,初始化时并没有设置相应的 getter 和 setter,导致 Vue.js 无法自动追踪这些变化。

相关推荐
abigale0311 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者30 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile34 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399737 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊42 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火42 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能