切换语言时如何强制React重渲染以更新antd自定义表格的列翻译

• 自定义表格组件未正确响应initialColumns变更：你当前组件里Table的columns用的是colmenu.visibleColumns，如果这个值是组件内部state缓存的，没有监听initialColumns的变化做同步，就会一直使用首次传入的列配置
• 父组件的columns数组引用未更新：如果columns的定义用了useMemo但未把翻译对象t加入依赖数组，或者columns定义在父组件外部，切换语言时不会生成携带新翻译的新数组
• 组件未触发重渲染：语言切换时如果父组件本身没有触发重渲染，也不会传递新的initialColumns到子组件

1. 修复自定义表格组件的同步逻辑 #

优先处理组件内部的列配置同步问题，监听传入的initialColumns变化，同步更新内部存储的可见列：

import { useState, useEffect } from 'react'

const TableComponent = (props) => {
  const { initialColumns, dataSource, handleClick } = props
  // 假设colmenu是内部存储列配置的state，初始化用传入的initialColumns
  const [colmenu, setColmenu] = useState({
    visibleColumns: initialColumns
  })

  // 监听initialColumns变化，每次传入新值时更新内部列配置
  useEffect(() => {
    setColmenu(prev => ({
      ...prev,
      visibleColumns: initialColumns
    }))
  }, [initialColumns])

  return ( <Table
            columns={colmenu.visibleColumns}
            dataSource={dataSource}
            size="small"
            pagination={{
              pageSizeOptions: ['10', '20', '50'],
              showSizeChanger: true,
            }}
          />)
}

2. 确保父组件的columns数组随语言更新 #

不要把columns定义在父组件外部，若使用useMemo优化必须把翻译对象t加入依赖：

const Parent = () => {
  const { messages: t, locale } = useIntl()

  // 方式1：直接定义在组件内部，每次重渲染自动生成带最新翻译的数组
  const columns = [
    {
      title: t.status,
      dataIndex: 'status',
      key: 'status',
      // 可选优化：字符串排序传入当前语言标识，保证排序符合当地语言规则
      sorter: (a, b) => a.status.localeCompare(b.status, locale),
      ...GetColumnSearchProps(['status']),
      className: 'text-center',
      checked: true,
    },
    // 其余列配置
  ]

  // 方式2：用useMemo优化时必须把t加入依赖数组
  // const columns = useMemo(() => [
  //   { title: t.status, /* 其余配置 */ }
  // ], [t]) 

  return (
    <TableComponent
      initialColumns={columns}
      dataSource={data}
      handleClick={addModal}
      title="AABC"
    />
  )
}

3. 兜底方案：绑定key强制组件重挂载 #

如果不想修改组件内部逻辑，直接在调用表格组件时绑定和当前语言关联的key，语言切换时key变化会触发组件完全重新挂载，自动使用最新的props：

<TableComponent
  initialColumns={columns}
  dataSource={data}
  handleClick={addModal}
  title="AABC"
  key={locale} // locale为当前语言标识，比如'zh-CN'/'en-US'
/>

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