React Typescript：Antd 表过滤器

Question

I am getting an error in the columns when I try the following:

{
   title: "Gruppe",
   dataIndex: 'group',
   filters: [
      this.state.dropdownItems.map((item) => ({
         text: item.group,
         value: item.group
      })
   )],
   onFilter: (value, record) => record.TransactionType.includes(value),
},

Error: *TS2322 (TS) Type '({ title: string; dataIndex: string; key: string; width: number; align: "center"; sorter: (a: any, b: any) => number; filters?: undefined; onFilter?: undefined; render?: undefined; } | { title: string; ... 7 more...; render?: undefined; } | {...; } | {...; } | {...; })[]' is not assignable to type 'ColumnsType'. Type '{ title: string; dataIndex: string; key: string; width: number; align: "center"; sorter: (a: any, b: any) => number; filters?: undefined; onFilter?: undefined; render?: undefined; } | { title: string; ... 7 more...; render?: undefined; } | {...; } | {...; } | {...; }' is not assignable to type 'ColumnGroupType | ColumnType'. Type '{ title: string; dataIndex: string; width: number; align: "center"; filters: { text: string; value: string; }[][]; onFilter: (value: any, record: any) => any; key?: undefined; sorter?: undefined; render?: undefined; }' is not assignable to type 'ColumnGroupType | ColumnType'. Type '{ title: string; dataIndex: string; width: number; align: "center"; filters: { text: string; value: string; }[][]; onFilter: (value: any, record: any) => any; key?: undefined; sorter?: undefined; render?: undefined; }' is not assignable to type 'ColumnType'. Types of property 'filters' are incompatible. Type '{ text: string; value: string; }[][]' is not assignable to type 'ColumnFilterItem[]'. Type '{ text: string; value: string; }[]' is missing the following properties from type 'ColumnFilterItem': text, value *

Answer 1

Since map returns a new array, so now you are defining an 2 dimensional array as filters, it should be like this:

filters: [
  ...this.state.dropdownItems.map((item) => ({
     text: item.group,
     value: item.group
  })
)]

Or:

filters: this.state.dropdownItems.map((item) => ({
     text: item.group,
     value: item.group
  })
)