antd Table在dataSource绑定的state更新时未自动重渲染如何解决

问题解决方法 #

按以下优先级排查处理：

• 确认状态更新时触发数组引用变更
  React 基于浅比较判断状态是否需要触发重渲染，若接口返回的数组和原machineDetails为同一内存引用，即使内容更新也不会触发组件重渲染。修改getData逻辑，每次更新传入新数组：

async function getData() {
  const result = await get(api)
  // 解构生成新数组触发引用更新，也可替换为Array.from(result.data)
  setMachineDetails([...result.data])
  // 可添加日志确认接口返回数据是否符合预期
  console.log('接口返回最新数据：', result.data)
}

• 处理依赖machineDetails的columns配置
  若columns配置绑定了machineDetails的取值，需要用useMemo包裹columns配置，并将machineDetails加入依赖项，确保columns随状态同步更新：

import { useMemo } from 'react'

// 放在组件内部
const columns = useMemo(() => {
  // 此处替换为你原本的columns定义逻辑
  return [
    {
      title: '示例列',
      dataIndex: 'name',
      key: 'name'
    },
    // 其余列配置
  ]
}, [machineDetails]) // 必须将machineDetails加入依赖数组

• 校验rowKey唯一性
  antd Table 依赖rowKey识别行数据，若存在重复的machineID或者machineID为空，会导致Table判定为同一行不触发更新。可修改rowKey取值规则，优先使用业务唯一字段，无唯一字段时可用索引兜底：

<Table
  showHeader
  expandIconColumnIndex={4}
  columns={columns}       
  dataSource={machineDetails}
  rowKey={(record, index) => record.machineID ?? index}
/>

• 排查请求缓存问题
  若GET请求被浏览器或者网关缓存，会导致每次返回旧数据，可在请求链接后添加时间戳参数避免缓存：

const result = await get(`${api}?t=${Date.now()}`)

内容的提问来源于stack exchange，提问作者Athavan T