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

Question

问题描述

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，如果我并没有这么多精力去处理这么多细节。

Answer 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是个很不好的设计