Ant Design Table筛选弹窗点击确定后闪烁问题求助

在Ant Design Table的「Name」列添加筛选功能后，选择筛选选项（如“Joe”）并点击「确定」时，筛选弹窗在关闭前会出现闪烁现象。

问题原因 #

查看代码后发现，问题源于两点：

1. 自定义的FilterDropdown组件未做渲染优化，每次Table父组件重渲染时，该组件都会被重新创建并渲染，引发不必要的DOM变动。
2. 筛选确定时的状态更新与弹窗关闭操作时序冲突，状态更新触发的组件重渲染与弹窗关闭动画叠加，导致视觉上的闪烁。

解决方案 #

1. 优化FilterDropdown组件的渲染

将自定义的FilterDropdown提取为独立组件，并用React.memo包裹，避免无意义的重渲染：

import React, { useState, useEffect } from 'react';
import { Input, Button, Space } from 'antd';
import { FilterDropdownProps } from 'antd/lib/table/interface';

const FilterDropdown = React.memo((props: FilterDropdownProps) => {
  const [searchText, setSearchText] = useState('');
  const [selectedKeys, setSelectedKeys] = useState(props.selectedKeys);

  useEffect(() => {
    setSelectedKeys(props.selectedKeys);
  }, [props.selectedKeys]);

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(e.target.value);
  };

  const handleReset = () => {
    setSearchText('');
    setSelectedKeys([]);
    props.onReset();
  };

  const handleOk = () => {
    setSelectedKeys(selectedKeys);
    setTimeout(() => {
      props.onConfirm();
    }, 0);
  };

  const filteredOptions = props.options?.filter(opt =>
    opt.label.includes(searchText)
  );

  return (
    <div style={{ padding: 8 }}>
      <Input
        placeholder="Search name"
        value={searchText}
        onChange={handleSearch}
        style={{ width: 188, marginBottom: 8, display: 'block' }}
      />
      <Space>
        <Button type="primary" onClick={handleOk} size="small" style={{ width: 90 }}>
          OK
        </Button>
        <Button onClick={handleReset} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </Space>
    </div>
  );
});

2. 调整状态更新与弹窗关闭的时序

在handleOk函数中，通过setTimeout将弹窗关闭操作延迟到状态更新完成后执行，避免时序冲突导致的闪烁：

const handleOk = () => {
  setSelectedKeys(selectedKeys);
  // 延迟执行确认操作，确保状态更新完成后再关闭弹窗
  setTimeout(() => {
    props.onConfirm();
  }, 0);
};

效果验证 #

完成上述修改后，点击筛选弹窗的「确定」按钮时，状态更新和弹窗关闭操作的时序会更合理，组件重渲染的次数减少，闪烁现象会被消除。

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