react-table如何根据两个下拉框选中值动态展示对应列

你当前的代码问题在于将column.getToggleHiddenProps()直接绑定到了下拉选项上，这个API是用来给交互元素绑定点击切换列显隐的逻辑，完全不符合你通过下拉选择后批量控制列显隐的需求。可以按以下步骤修改：

1. 移除下拉选项上的{...column.getToggleHiddenProps()}绑定
2. 根据两个下拉框的选中值动态计算需要隐藏的列，传入react-table的受控state即可

修改后的完整代码如下：

import { FC, useState, useMemo } from "react";
import { useTable } from "react-table";

interface Column {
  Header: string;
  accessor: string;
  id: Function | string | number;
}

interface TableProps {
  columns: Array<any>;
  data: Array<any>;
}

export const Table: FC<TableProps> = ({ columns, data }) => {
  const [valueOne, setValueOne] = useState("");
  const [valueTwo, setValueTwo] = useState("");
  const handleChangeOne = (e: any) => setValueOne(e.target.value);
  const handleChangeTwo = (e: any) => setValueTwo(e.target.value);

  // 动态计算需要隐藏的列
  const hiddenColumns = useMemo(() => {
    // 任意一个下拉未选中时，显示所有列
    if (!valueOne || !valueTwo) return [];
    // 两个下拉都选中时，隐藏所有未被选中的列
    return columns
      .filter(col => ![valueOne, valueTwo].includes(col.id as string))
      .map(col => col.id as string);
  }, [valueOne, valueTwo, columns]);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    allColumns,
  } = useTable({
    data,
    columns,
    // 传入受控的隐藏列配置
    state: {
      hiddenColumns
    }
  });

  return (
    <>
      <select value={valueOne} onChange={handleChangeOne}>
        <option value="">请选择第一列</option>
        {allColumns.map((column) => (
          <option key={column.id} value={column.id}>
            {column.id}
          </option>
        ))}
      </select>

      <select value={valueTwo} onChange={handleChangeTwo}>
        <option value="">请选择第二列</option>
        {allColumns.map((column) => (
          <option key={column.id} value={column.id}>
            {column.id}
          </option>
        ))}
      </select>

      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row);

            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
};

如果需要避免两个下拉选择同一列的情况，可以在handleChangeOne和handleChangeTwo里加校验逻辑，比如选中重复值时清空另一个下拉的选择或者给出提示。

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