如何在React表单中渲染Django的APPRAISAL_TYPE选项？

问题根源 #

你的Django模型中category是IntegerField，但React组件里传递给Select的value或提交的值不是整数类型，导致后端校验时抛出"期望整数"的错误。

解决方案 #

1. 确保Select选项的value为整数类型

首先要保证categoryOptions的每个选项value是数字，而非字符串：

// 前端定义选项（或从后端接口获取正确格式的choices）
const categoryOptions = [
  { value: 1, label: '自评' },
  { value: 2, label: '直属经理评估' },
  { value: 3, label: 'COO评估' }
];

如果是从后端获取choices（比如Django返回APPRAISAL_TYPE.choices），要确保前端转换时保留value的整数类型，避免自动转成字符串。

2. 修正Select的value绑定

不要通过APPRAISAL_TYPE[appraisalDetails.status]取值（这会得到键名而非数字），直接绑定后端返回的category整数值：

<Select
  name="category"
  value={appraisalDetails.category} // 这里直接用整数类型的category值
  options={categoryOptions}
  onChange={(option) => handleChange(option, "category")}
/>

如果appraisalDetails里存储的是状态名称（比如"self_appraisal"），需要在前端定义对应映射并转成数字：

// 前端映射Django的APPRAISAL_TYPE
const APPRAISAL_TYPE_MAP = {
  self_appraisal: 1,
  line_manager: 2,
  coo: 3
};

// 绑定value时转成整数
value={APPRAISAL_TYPE_MAP[appraisalDetails.status]}

3. 处理onChange事件，确保提交值为整数

在handleChange中，明确将选中的value转为整数（避免Select组件返回字符串的情况）：

const handleChange = (option, field) => {
  setAppraisalDetails(prev => ({
    ...prev,
    [field]: Number(option.value) // 强制转为整数类型
  }));
};

4. 额外检查：接口传参格式

提交表单时，确保category字段以整数形式发送给后端，避免JSON序列化时自动转成字符串。比如用Axios提交时，直接传递数字即可，不需要额外转换。

内容的提问来源于stack exchange，提问作者Ra'ees Bello