如何在动态 AntD 表单中过滤 Select 中的选项？

Question

问题描述

我正在 React 项目中使用 Ant Design (Antd) 处理动态表单。该表单包含一个

Select

组件，该组件根据字段数组动态呈现选项，每个字段都有一个

id

和

name

。在我添加过滤器以从下拉选项中排除已选择的字段之前，该表单一直正常运行。

问题：应用过滤器后，当我从过滤列表中选择一个选项时，选择组件显示值（字段的id）而不是标签（字段的名称）。

代码示例

这里：https://stackblitz.com/edit/vitejs-vite-nditzv?file=src%2Fcomponents%2FDynamicForm.tsx,src%2FApp.tsx

附加信息

"antd": "^5.19.4"
react": "^18.3.1"

预期行为

选择后，

Select

组件应显示字段的

name

。

实际行为

Select

组件显示选择后字段的

id

。

Answer 1

我检查了代码示例并运行它。您面临的问题实际上并没有发生。但我注意到您没有正确创建

fieldOptions

。它应该只有

value

和

label

键。它可能会导致错误的行为。尝试这样做

  const fieldOptions = filteredFields.map(({ id, name }) => ({
    value: id,
    label: name,
  }));

而不是这个

  const fieldOptions = filteredFields.map(({ id, name }) => ({
    value: id,
    label: <span>{name}</span>,
    name,
  }));