渲染反应组件存储在包含对象数组的状态

Question

当我在桌子上应用过滤器时，我想更改过滤器图标的图标颜色，但是图标颜色并没有以某种方式更改。

这是我的组件，

const Table = () => {

    const [tableFilters, setTableFilters = useState({name: []})


    let tableColumns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            filters: [],
            filterDropdownVisible: false,
            filterIcon: (filtered: boolean) => {
                return (
                    <TableFilterIcon filterColumnData={filters.name.data} />
                )
            },
        },
    ]

    const [columns, setColumns] = useState(tableColumns)


    return (
        <>
            <CommonTable
                data={data}
                columns={tableColumns}
            />
        </>
    )
}

export default Table

在TableFiltericon组件中，我正在基于所选过滤器呈现非彩色和彩色图标，如果使用过滤器，则我正在显示颜色图标。 但是，当我应用过滤器时，TableFiltericon组件并没有呈现，这就是图标颜色不变的原因。也许TableFiltericon组件是列的对象，这就是为什么？

注意：如果我不将列存储在状态中，而直接将列传递到可插件的组件，则可以使用。

谁能帮我吗？另外，我正在为UI组件使用ANT设计框架。