React FormField下拉框显示value而非label的问题求助

可能的原因及解决方案： #

1. 组件选项格式不匹配

react-form-input-fields的FormField组件（select类型）对选项的字段名有特定要求：默认使用text字段作为显示文本，而非label。如果你的选项数组用了label作为文本字段，组件会无法识别，导致选中后直接显示value值。

修复代码：
将选项数组中的label字段替换为text：

// 修改前
const options = [
  { label: "选项1", value: "1" },
  { label: "选项2", value: "2" }
];

// 修改后
const options = [
  { text: "选项1", value: "1" },
  { text: "选项2", value: "2" }
];

然后正常使用FormField组件即可：

<FormField
  type="select"
  name="mySelect"
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.target.value)}
  options={options}
/>

2. 手动转换选项格式（需保留label字段时）

如果必须保留label字段，可以在传入options前将其转换为组件支持的格式：

const options = [
  { label: "选项1", value: "1" },
  { label: "选项2", value: "2" }
];

// 转换为组件要求的text/value结构
const formattedOptions = options.map(opt => ({
  text: opt.label,
  value: opt.value
}));

// 在组件中使用转换后的数组
<FormField
  type="select"
  name="mySelect"
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.target.value)}
  options={formattedOptions}
/>

关键提示 #

优先查看react-form-input-fields的官方文档，确认FormField组件select类型的options参数格式要求。遵循组件库的参数规范是解决这类问题最直接的方式。

内容的提问来源于stack exchange，提问作者Alexandro Pineda