React动态移除表格列失效求助：添加正常但移除无响应

问题根源 #

你遇到的核心问题是React元素的引用比较导致的：

• 每次组件渲染时，productPrice这类变量都会重新创建一个新的Table.Column元素对象，和之前存入dynamicColumns数组里的元素引用完全不同。
• dynamicColumns.includes(productPrice)使用的是严格相等（===）判断，永远匹配不到已存在的列，所以一直执行else分支的添加逻辑。

解决方案 #

推荐两种可行的修复方式，优先选择第一种更健壮的方案：

方案1：改用列配置对象存储（推荐）

不要直接把React元素存在state里，而是存储列的配置信息，渲染时再生成Table.Column组件。这种方式通过唯一标识判断列的存在性，完全避免引用问题。

代码修改如下：

// 定义列的配置对象，而非直接创建Table.Column元素
const columnConfigs = {
  productName: {
    dataIndex: "title",
    title: "Product Name"
  },
  productPrice: {
    dataIndex: "status",
    title: "Price",
    sorter: (a: any, b: any) => a.status - b.status
  },
  productOffers: {
    dataIndex: "createdAt",
    title: "Offers",
    sorter: (a: any, b: any) => a.createdAt - b.createdAt,
    render: (value: any) => <DateField format="LLL" value={value} />
  },
  productPriceVariation: {
    dataIndex: "createdAt",
    title: "Price Variation",
    sorter: (a: any, b: any) => a.createdAt - b.createdAt,
    render: (value: any) => <DateField format="LLL" value={value} />
  }
};

// State存储当前启用的列的key数组
const [enabledColumnKeys, setEnabledColumnKeys] = useState<string[]>([
  "productName", "productPrice", "productOffers", "productPriceVariation"
]);

// 渲染时动态生成Table.Column组件
const dynamicColumns = enabledColumnKeys.map(key => {
  const config = columnConfigs[key];
  return <Table.Column key={key} {...config} />;
});

// 切换Product Price列的显示/隐藏
const toggleProductPriceColumn = () => {
  setEnabledColumnKeys(prevKeys => {
    if (prevKeys.includes("productPrice")) {
      // 移除列：过滤掉对应key
      return prevKeys.filter(key => key !== "productPrice");
    } else {
      // 添加列：追加key到数组
      return [...prevKeys, "productPrice"];
    }
  });
};

const onClick: MenuProps['onClick'] = ({key}) => {
  if (key === '1') {
    toggleProductPriceColumn();
  }
};

方案2：修改存在性判断逻辑（快速修复）

如果不想重构代码，可以把includes替换为通过dataIndex判断列是否存在，因为dataIndex是列的唯一标识，不受元素引用变化影响：

const onClick: MenuProps['onClick'] = ({key}) => {
  if (key == '1') {
    // 用dataIndex判断列是否存在，而非直接比较元素引用
    const isPriceColumnExist = dynamicColumns.some(
      column => column.props.dataIndex === productPrice.props.dataIndex
    );
    if (isPriceColumnExist) {
      removeElement(productPrice);
    } else {
      addElement(productPrice);
    }
  }
};

// 同时优化addElement，使用函数式更新避免依赖旧state
const addElement = (element: any) => {
  setDynamic(prevState => [...prevState, element]);
};

总结 #

方案1的优势在于：

• 代码更易维护，列配置和渲染逻辑分离
• 避免React元素引用带来的各种潜在问题
• 扩展更方便（比如后续要添加更多列，只需在配置对象里新增即可）

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