React Typescript：Antd 表过滤器

Posted 2023-02-21

【中文标题】React Typescript：Antd 表过滤器

【英文标题】：React Typescript: Antd Table filter

【发布时间】：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”的以下属性：文本，值 *

【参考方案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
  )
)