React与Axios提交复选框遇422错误：status字段需布尔值

问题核心：复选框勾选时，你用ev.target.value获取到的是字符串"on"，但后端接口要求status必须是布尔类型的true或false，所以触发了422错误。未勾选时因为初始值是布尔false，所以能正常提交。

修复步骤 #

直接修改复选框的onChange事件，将ev.target.value替换为ev.target.checked——这个属性会直接返回布尔值（选中为true，未选中为false），完美匹配后端的字段要求。

修改后的复选框代码：

<input 
  type="checkbox" 
  name="status" 
  id="status" 
  checked={survey.status} 
  onChange={(ev) => setSurvey({...survey, status: ev.target.checked})} 
  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>

额外验证（可选） #

如果担心其他场景下status类型异常，可以在提交前再做一次类型转换，确保payload里的status是布尔值：

const payload = {
  ...survey,
  status: Boolean(survey.status)
};

这样修改后，勾选复选框时status会被设置为布尔true，提交给后端就能符合接口要求，不会再出现422错误。

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