React Typescript：Antd 表过滤器答案

【问题标题】：React Typescript: Antd Table filterReact Typescript：Antd 表过滤器
【发布时间】：2022-01-23 23:24:22
【问题描述】：

当我尝试以下操作时，列中出现错误：

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

错误：*TS2322 (TS) Type '({ title: string; dataIndex: string; key: 细绳;宽度：数字；居中对齐”;分拣机：（a：任何，b：任何）=> 数字;过滤器？：未定义； onFilter?：未定义；渲染？：未定义； } | {标题：字符串； ... 7 更多 ...;渲染？：未定义； } | { ...; } | { ...; } | { ...; })[]' 不可分配给类型 '列类型'。输入'{标题：字符串；数据索引：字符串；键：字符串；宽度：数字；居中对齐”; sorter: (a: any, b: any) => number;过滤器？：未定义；过滤器？：不明确的;渲染？：未定义； } | {标题：字符串； ... 7 更多 ...; 渲染？：未定义； } | { ...; } | { ...; } | { ...; }' 不是可分配给类型 'ColumnGroupType | 列类型”。输入'{标题：字符串；数据索引：字符串；宽度：数字；居中对齐”;过滤器：{文本：字符串；值：字符串； }[][];过滤器：（值：任意，记录：任意）=> 任意；键？：未定义；分拣机？：未定义；渲染？：未定义； }' 不可分配给类型 '列组类型 | 列类型”。输入'{标题：字符串；数据索引：字符串；宽度：数字；居中对齐”;过滤器：{文本：字符串；值：字符串； }[][];过滤器：（值：任意，记录：任意）=> 任意；键？：未定义；分拣机？：未定义；渲染？：未定义； }' 不可分配给类型 '列类型'。属性“过滤器”的类型不兼容。输入'{文本：字符串；值：字符串； }[][]' 不可分配给类型 'ColumnFilterItem[]'。输入'{文本：字符串；值：字符串； }[]' 缺少类型“ColumnFilterItem”的以下属性：文本，值 *

【问题讨论】：

标签： javascript reactjs typescript antd

【解决方案1】：

由于map返回一个新数组，所以现在你定义一个二维数组作为过滤器，它应该是这样的：

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

或者：

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

【讨论】：