如何在运行时显示/隐藏列？

import React, { useState, useEffect } from "react";

const hideColumn = (state, column) => {
    state[column] = false;
  };

const showColumn = (state, column) => {
    state[column] = true;
  };

const Table({ data = [], columnNames = [] }) {
  const [tableColumns, setTableColumns] = useState(
    columnNames.map((name) => [name, data[0].includes(name)])
  );

  const [showColumnAt, setShowColumnAt] = useState(NaN);

  useEffect(() => {
    const currentColumn = columnNames.indexOf(showColumnAt);
    const hiddenColumns =
      columnNames.every((name) => data[0].indexOf(name) === -1) ? {} : {};
    data.forEach((row) => {
      if (showColumnAt && data[0].indexOf(showColumnAt)) {
        hiddenColumns[name] = false;
      }
      setTableColumns(tableColumns.map((col) => [col[0], col[1] + row]));
    });

    if (!currentColumn) {
      setTableColumns(tableColumns.map((col) => [col[0], true]));
    } else {
      Object.entries(displayColumns).forEach(([name, value]) => {
        if (col[1] === false) {
          setTableColumns(tableColumns.map((col) => [
            col[0],
            hiddenColumns[name],
          ]));
        }
        if (displayColumns[name]) {
          setTableColumns((prevColumns) => [
            ...prevColumns,
            [col[0], ...displayColumns[name]],
          ]);
        }
      });
    }
  }, [
    data,
    columnNames,
    setTableColumns,
    setShowColumnAt,
    displayColumns,
  ]);

  const onShowColumnClick = (event, column) => {
    event.preventDefault();
    if (column === showColumnAt) {
      setShowColumnAt(null);
    } else {
      showColumnAt = column;
    }
  };

  const renderHiddenColumn = () => (
    <th
      onClick={(event) => onShowColumnClick(event, showColumnAt)}
      className={showColumnAt === null ? "hidden-column" : ""}
    >
      {`隐藏${showColumnAt}`}
    </th>
  );

  return (
   <table>
     <tbody>
        {tableColumns.map((col, index) => (
          <tr key={index}>
            <td align="left" onClick={onShowColumnClick}>
              {col[0]}
            </td>

            {/* Hidden column */}
            {col[1] ? (
              col[1] === false ? null : renderHiddenColumn()
            ) : (
              col[1] && <th onClick={event => hiddenColumns[col[0]] = !hiddenColumns[col[0]]} />
            )}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// ...