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 无法自动追踪这些变化。

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试