React表单POST提交到Django后端时提示模型字段未定义报错如何解决

1. 直接触发ReferenceError的React端错误 #

你定义的React state变量名和提交时调用的变量名完全不匹配，这是报错的核心原因：

• 定义的state是const [firstName, setFirstName] = useState("")，但formField.append时调用了不存在的first_name变量
• 定义的state是const [lastInitial, setLastInitial] = useState("")，但调用了不存在的first_initial变量
• 定义的state是const [dateVisited, setDateVisited] = useState("")，但调用了不存在的date_visited变量
• 定义的state是const [foodRating, setFoodRating] = useState("")，但调用了不存在的food_rating变量
• 定义的state是const [serviceRating, setServiceRating] = useState("")，但调用了不存在的service_rating变量

修正后的addReviewForm参考代码：

const addReviewForm = async () => {
    let formField = new FormData()
    // FormData.append第一个参数填后端接收的字段名，第二个参数填你定义的React state变量
    formField.append('first_name', firstName)
    formField.append('last_name', lastInitial)
    formField.append('message', message)
    // 注意：Django模型要求必填phone_number字段，你需要补充对应state和表单输入项，再把值加进来
    formField.append('phone_number', 你补充的对应state变量)

    await axios({
        method: 'post',
        url: 'http://127.0.0.1:8000/api/reviewform/',
        data: formField,
    }).then((response) => {
        console.log(response.data);
        history.push('/')
    })
}

2. Django端存在的错误 #

• ContactForm模型的__str__方法返回self.email，但模型内没有定义email字段，运行时会直接报错
• 序列化器ContactFormSerializer的fields列表包含email、contact_type两个不存在于模型的字段，序列化校验会直接失败
• 你React端收集的到访日期、餐饮评分、服务评分字段，在Django模型里完全没有定义，如果要存储这些信息需要先在模型中新增对应字段，再同步添加到序列化器的fields列表
• 确认ContactFormView对应的路由地址确实是/api/reviewform/，否则会返回404错误

3. 逻辑对齐建议 #

你当前做的是评价表单功能，但Django侧写的是联系表单模型，两者字段规则完全不匹配，建议先对齐前后端需要传递的字段列表，再进行联调。

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