React向Django发登录POST请求返回400 Bad Request如何解决？

• 核心问题：Login.jsx中的两个表单输入控件未添加name属性。你的onChange更新逻辑依赖e.target.name匹配formData中的email、password字段，缺少name属性时无法正确更新表单状态，导致提交到后端的参数始终为空，触发后端参数校验失败返回400。
• 可优化问题：Redux login action的异常分支未打印错误信息，不利于后续接口问题排查。

1. 给表单输入框添加对应name属性 #

修改Login.jsx中两个Form.Control的代码，补充name字段：

<Form.Group className="mb-3" controlId="formBasicEmail">
    <Form.Control 
        type="email" 
        name="email"
        placeholder="example@email.com" 
        onChange={e => onChange(e)} 
        required 
    />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
    <Form.Control 
        type="password" 
        name="password"
        placeholder="Password" 
        minLength='6' 
        onChange={e => onChange(e)} 
        required 
    />
</Form.Group>

2. （可选）添加接口错误日志 #

修改auth.jsx的异常捕获逻辑，打印错误信息方便排查：

catch (err){
    // 打印后端返回的错误详情
    console.log('登录失败：', err.response?.data || err.message)
    dispatch({
        type: LOGIN_FAIL,
    })
}

内容的提问来源于stack exchange，提问作者C-Bizz