React项目中如何调整数据结构适配API提交要求

我正在开发地点编辑表单的部门下拉组件，当前填充表格的API仅返回包含departmentName的数据，但提交数据的API要求使用嵌套的departmentOther.id结构（需要移除departmentName并添加对应部门ID）。如何处理数据以适配PUT请求？

现有数据结构 #

表格API返回数据 #

{
  "id": 1,
  "name": "23456",
  "description": "New Location",
  "departmentName": "Tools"
}

部门下拉API返回数据 #

{
  "name": "Tools",
  "id": "1"
}

目标提交数据结构 #

{
  "id": 1,
  "name": "23456",
  "description": "New Location",
  "departmentOther": {
    "id": 1
  }
}

相关代码 #

表单中使用的Dropdown组件 #

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

Dropdown组件实现 #

export default function Dropdown(props) {
  const { error = null, label, 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 );
       };
       fetchData();
   }, [setOptions]); 

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

解决方案 #

方案一：修改Dropdown组件，直接存储部门ID #

这是最直接的方式，让表单数据结构贴近提交要求，减少后续转换逻辑：

1. 调整Dropdown组件的MenuItem值，把部门ID作为选中值，保留名称显示：

{options.map((option, id) => (
    <MenuItem
        key={option.id}
        value={option.id} // 将value从option.name改为option.id
    >
        {option.name} // 显示内容不变
    </MenuItem>
))}

2. 修改表单中Dropdown的配置：
   • 把name改成departmentOther.id，让表单字段直接对应提交结构
   • 编辑场景下，根据表格返回的departmentName从下拉选项中匹配对应ID作为初始值

// 在组件内先匹配部门ID
const departmentId = options.find(opt => opt.name === values.departmentName)?.id;

<Controls.Dropdown
    onChange={handleInputChange}
    label='Department'
    name='departmentOther.id' // 修改字段名适配提交结构
    prompt='Select A Department...'
    url='/api/maintain/departments/'
    value={departmentId || ''} // 用匹配到的ID作为初始值
 />

方案二：提交前手动转换数据结构 #

如果不想修改现有表单字段配置，可以在发送PUT请求前做数据转换：

const handleSubmit = async (values) => {
    // 1. 根据选中的部门名称匹配对应ID
    const selectedDept = options.find(dept => dept.name === values.departmentName);
    // 2. 构建符合要求的提交数据
    const submitData = {
        ...values,
        departmentOther: {
            id: selectedDept ? parseInt(selectedDept.id) : null // 转成数字类型匹配目标结构
        }
    };
    // 3. 移除不需要的departmentName字段
    delete submitData.departmentName;
    // 4. 发送PUT请求
    await axios.put(`/api/locations/${values.id}`, submitData);
};

注意事项 #

• 如果部门ID返回的是字符串类型，记得转成数字（比如用parseInt），匹配目标提交结构的要求
• 优先推荐方案一，减少数据转换环节，降低出错概率

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