antd的table组件引用redux-toolkit内的state数据无法重新渲染

耍酷的木耳
  • 11

问题描述

antd的table组件引用redux-toolkit内的state数据无法重新渲染

问题出现的环境背景及自己尝试过哪些方法

antd:4.21.3
react:18.2.0
os:Windows 10 专业版(19044.1766)
chrome:102.0.5005.115

redux-toolkit已内置集成Immutable.js,所以dispatch了action之后虚拟DOM应该是变更了的
antd的table的dateSource配置项也是检测虚拟DOM变更重新渲染,实际上效果并不是预期这样发展

  1. 在我的table内配置 dataSource={state.table.list}(此处state是我的redux内的state)
  2. 调用dispatch更新state(redux-toolkit内集成了Immutable.js,所以这里的虚拟DOM应该也是变更了)
  3. 检查console控制台数据打印与实际渲染效果

其他尝试

  1. rowKey={row => row.id + Date.now()} 这条当然有效,但是我不喜欢这种写法,另外它会损失性能,括号内同理(rowKey={row => JSON.stringify(row)})
  2. 当然我也尝试过使用dispatch(settable({...payload}))类似的写法,仍然是无效的
  3. 也有使用过Object.assign({},{...payload})的写法,也是无效的

相关代码

state & action


settable(state, { payload }) {
  state.params.pageSize = payload.pageSize
  state.params.current = payload.current
  state.table.total = payload.total
  state.table.list = payload.list
},

component

const state = useSelector((state: any) => state['user.user']);
...
<Table
     rowKey={row => row.id}
     rowSelection={rowSelection}
     columns={columns}
     dataSource={state.table.list}
     onChange={table_onChange}
     pagination={pagination}
/>

你期待的结果是什么?实际看到的错误信息又是什么?

预期

  • 控制台数据打印为更新后数据
  • table效果匹配为更新后的效果,即为更新后数据

实际

  • 控制台数据打印为更新后数据
  • table效果匹配为更新后的效果,即为未更新数据

另外开源团队要求提交issue需要提供重现链接,of course,如果我并没有这么多精力去处理这么多细节。

回复
阅读 475
1 个回答
settable(state, { payload }) {
  state.params.pageSize = payload.pageSize
  state.params.current = payload.current
  state.table.total = payload.total
  state.table.list = payload.list
},

应该是数据引用没有更新,所以没有重新渲染,修改承这样试试

settable(state, { payload }) {
 state.params = {
   ...state.params, 
   pageSize:payload.pageSize,
   current:payload.current
}
 state.table= {
   ...state.table, 
  total :payload.total,
  list:payload.list
}
},

多说一下 页面state提升成reudx state是个很不好的设计

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏