react-table报错hooks.visibleColumns为undefined无法读取push方法

运行react-table行选择相关代码时抛出Uncaught TypeError: Cannot read properties of undefined (reading 'push')错误，经排查错误触发点是hooks.visibleColumns取值为undefined。场景为Rails应用集成React开发，除该hooks相关逻辑外，其余表格基础功能运行正常。

问题代码如下：

const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
selectedFlatRows,
state: { selectedRowIds }} = useTable(
{
  columns: COLUMNS,
  data: testdata,
},
useRowSelect,
(hooks) => {
  hooks.visibleColumns.push((columns) => [
    {
      id: "selection",
      Header: ({ getToggleAllRowsSelectedProps }) => (
        <div>
          <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
        </div>
      ),
      Cell: ({ row }) => (
        <div>
          <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
        </div>
      )
    },
    ...columns
  ]);
}
);

该错误和Rails运行环境无关，属于react-table本身的版本或API使用问题，常见触发原因有两个：

• 版本不匹配：visibleColumns是react-table v7版本的内置hook属性，如果你安装的是v8及以上版本，整个API体系已经重构，不存在这个属性，取值自然为undefined。
• 插件加载顺序异常：useRowSelect插件负责注入行选择相关的hook属性，如果插件传入顺序错误、或者插件没有正确注册，就会导致对应hook属性不存在。

1. 先确认react-table版本，如果你需要使用这套v7的列注入写法，直接锁定v7稳定版本安装：

   # npm用户执行
   npm install react-table@7.8.0
   # yarn用户执行
   yarn add react-table@7.8.0
   

2. 调整代码，对hooks.visibleColumns做兜底初始化，同时严格保证插件传入顺序：扩展插件必须写在自定义hook回调的前面，修正后的代码如下：

   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
     selectedFlatRows,
     state: { selectedRowIds }
   } = useTable(
     {
       columns: COLUMNS,
       data: testdata,
     },
     useRowSelect, // 插件必须放在自定义hooks回调之前，顺序不能调换
     (hooks) => {
       // 兜底初始化，避免属性不存在时调用push报错
       hooks.visibleColumns = hooks.visibleColumns || [];
       hooks.visibleColumns.push((columns) => [
         {
           id: "selection",
           Header: ({ getToggleAllRowsSelectedProps }) => (
             <div>
               <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
             </div>
           ),
           Cell: ({ row }) => (
             <div>
               <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
             </div>
           )
         },
         ...columns
       ]);
     }
   );
   

3. 如果你已经在使用v8版本react-table，不要套用v7的旧写法，直接使用v8官方提供的行选择内置API实现即可，不需要手动通过hooks注入选择列。

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