React表单下拉框更新时新增undefined字段问题求助

开发地点编辑表单时，部门下拉框通过API填充选项，使用记录的departmentId选中当前值，但选择新部门后，表单值里会新增一个键为undefined的字段，原departmentId仍保留，示例如下：

values: {
   id: 1,
   name: "Location1",
   description: "Plating",
   isArchived: 0,
   departmentId: 18,
   undefined: 22
}

表单内的下拉框及API调用 #

React.useEffect(() => {
  const fetchData = async () => {
    const res = await axios.get(`${editUrl + (selectedRecord.id)}`);
    setValues(res.data);
  };
  fetchData();
}, []); 

<Controls.Dropdown
  onChange={handleInputChange}
  label='Department'
  name='departmentId'
  value={values.departmentId}
  prompt='Select A Department...'
  url='/api/maintain/departments/'
/>

onChange事件（处理表单所有值） #

const handleInputChange = e => {
  const { name, value } = e.target;
  setValues({
    ...values,
    [name]: (typeof value === 'string' ? (value).replace(/ +(?= )/g, '').trimStart() : value )
  });
  if (validateOnChange) { 
    validate({ [name]: value }); 
  }
};

下拉框组件 #

export default function Dropdown(props) {
  const { error = null, label, name, onChange, prompt, value, url, ...other } = props;
  const [options, setOptions] = React.useState([]);
  const dropdownUrl = environment.originURL + environment.apiUrl + url; 

// 加载下拉框选项数据
React.useEffect(() => {
  const fetchData = async () => {
    const res = await axios.get(dropdownUrl);
    setOptions(res.data.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1)); // 按名称忽略大小写排序
  };
  fetchData();
}, []); 

return(
  <FormControl>
    <InputLabel>{label}</InputLabel>
    <Select
      defaultValue=''
      onChange={onChange}
      value={(value === undefined || value === null || options.length === 0) ? '' : value}
      name={name}
      {...other}
      {...(error && {error: true, helperText: error})}
    >
      <MenuItem value=''>{prompt}</MenuItem>
      {options.map((option, id) => (
        <MenuItem
          key={option.id}
          value={option.id}
        >
          {option.name}
        </MenuItem>
      ))}
    </Select>
  </FormControl>
);
}

问题根源 #

核心问题是下拉框组件的Select触发onChange时，事件对象的e.target.name为undefined，导致handleInputChange里的[name]解析成undefined，从而新增了这个无效字段。

具体触发场景：

1. 初始加载时，options为空数组，Select的value被设为空字符串''，但values.departmentId是数字类型（比如18），出现值类型不匹配。
2. Material-UI的Select组件在值类型不匹配时，无法正确将name属性绑定到事件对象上，导致e.target.name丢失，变成undefined。

修复方案 #

方案1：统一值类型，避免初始不匹配 #

修改下拉框组件中Select的value和空选项的value，确保类型一致：

// 1. 空选项的value改为null
<MenuItem value={null}>{prompt}</MenuItem>

// 2. Select的value属性修改为：
value={(value === undefined || value === null || options.length === 0) ? null : value}

这样初始状态下Select的value和空选项值类型一致（都是null），避免类型冲突导致的事件异常。

方案2：在事件处理中增加空值判断 #

在handleInputChange里先检查name是否有效，无效则不执行更新：

const handleInputChange = e => {
  const { name, value } = e.target;
  if (!name) return; // name为空时直接返回，不生成undefined字段
  setValues({
    ...values,
    [name]: (typeof value === 'string' ? value.replace(/ +(?= )/g, '').trimStart() : value )
  });
  if (validateOnChange) { 
    validate({ [name]: value }); 
  }
};

方案3：等待选项加载完成后再渲染Select #

在下拉框组件中，先判断options是否加载完成，未完成时显示加载状态：

// 下拉框组件return前新增判断
if (options.length === 0) {
  return <div>加载中...</div>; // 或使用CircularProgress等加载组件
}

return(
  <FormControl>
    {/* 原有的Select代码 */}
  </FormControl>
);

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