Ant Design Select选项无法保存及读取'name'属性报错求助

核心问题原因 #

1. Select组件onChange回调参数错误：Ant Design的Select组件onChange回调直接返回选中的值，而非DOM事件对象。你当前代码试图读取e.target.name，但e是选中的value（比如1、2、3），不存在target属性，因此触发Cannot read properties of undefined (reading 'name')错误，同时无法正确更新contact.test的值。
2. Option组件未渲染文本：当前Option标签内部为空，下拉选项无显示文本，用户无法直观选择。
3. 状态更新逻辑错误：因onChange处理错误，contact.test未被正确赋值，导致编辑页面无法读取已选值。

修复步骤 #

1. 修正Select的onChange事件处理 #

将Select的onChange回调改为直接接收选中值，手动指定字段名test（因为没有event对象获取name）：

<Select
  onChange={(selectedValue) => setContact({ ...contact, test: selectedValue })}
  value={contact.test}
  name="test"
  style={{ width: 120 }}
>

2. 补全Option组件的文本内容 #

在Option标签内渲染item.label，让下拉选项显示文字：

{selectOptions.map((item) => (
  <Option key={item.value} value={item.value}>{item.label}</Option>
))}

3. 移除无效的defaultValue设置 #

当前defaultValue='category'与selectOptions的value类型（数字）不匹配，且你已经用value={contact.test}控制状态，建议移除该属性，避免状态冲突。

修复后的完整Select代码块 #

<Form.Item label='Category'>
  <Select
    onChange={(selectedValue) => setContact({ ...contact, test: selectedValue })}
    value={contact.test}
    name="test"
    style={{ width: 120 }}
  >
    {selectOptions.map((item) => (
      <Option key={item.value} value={item.value}>{item.label}</Option>
    ))}
  </Select>
</Form.Item>

额外优化建议 #

• 编辑页面需确保从Context获取的contact数据中test字段值与Select的选项value类型一致（当前selectOptions的value是数字，需保证存储和读取的类型统一，避免因类型不匹配导致无法显示已选值）。
• Radio组件的checked判断存在大小写问题：contact.gender === "female"与Radio的value="Female"（首字母大写）不匹配，建议统一大小写，比如将Radio的value改为小写或判断时转为小写，避免性别选择状态异常。

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