React父组件调用HTable切换列显隐后状态不更新问题求助

1. 你将react-table实例存在useState中，仅在HTable组件挂载时初始化赋值一次。react-table内部的列显隐状态属于其内部状态管理，状态更新不会触发父组件的setTableInstance执行，父组件持有的tableInstance始终是初始化时的旧实例引用，自然拿不到最新的isVisible状态。
2. 你当前定义的tableInstanceprop类型是React.RefObject，但父组件实际传入的是回调函数，类型不匹配，且useImperativeHandle第一个参数要求接收ref对象，传回调函数本身就不符合API要求。
3. 代码存在拼写错误：column.toggleHiden()应为column.toggleHidden()。

你明确说明无法使用forwardRef处理泛型场景，可按如下方式修改：

第一步：调整HTable组件定义 #

import { useColumnVisibility } from 'react-table'

interface TableProps<T extends object> {
  data: T[],
  columns: Column<T>[],
  // 调整为实例变化回调类型，每次列显隐状态更新就把最新实例传出
  onInstanceChange?: (instance: TableInstance<T>) => void,
}

const HTable = <T extends object>({ columns, data, onInstanceChange }: TableProps<T>) => {
  const instance: TableInstance<T> = useTable<T>(
    { columns, data },
    // 必须添加useColumnVisibility插件，否则列显隐相关API和状态不会挂载
    useColumnVisibility
  )

  // 监听列显隐状态变化，主动通知父组件更新
  React.useEffect(() => {
    onInstanceChange?.(instance)
  }, [instance.state.columnVisibility, onInstanceChange, instance])

  // 此处保留你原有的表格渲染逻辑
}

第二步：调整父组件逻辑 #

const Parent = () => {
  const [tableInstance, setTableInstance] = React.useState<TableInstance<SaleItem>>();

  return (
    <>
      <HTable 
        data={data} 
        columns={columns} 
        onInstanceChange={(instance) => setTableInstance(instance)} 
      />
      {tableInstance?.columns.map((column) => (
        <Toggle 
          key={column.id}
          active={column.isVisible} 
          onClick={() => column.toggleHidden()}
        />
      ))}
    </>
  )
}

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