React向Django后端提交数据时case_category字段为null求助

我是React初学者，尝试把前端数据提交到Django后端数据库时遇到问题：部分字段（比如case_category）始终传递null值。就算从下拉列表选了分类，浏览器控制台输出的JSON里case_category还是null，数据库的case_category_id列值也为null。

浏览器输出示例： #

{    
    "original_name": "7",    
    "author": null,    
    "case_category": null,    
    "article": 100,    
    "pub_date": "2023-11-30T10:24:08.346215Z",    
    "preliminary_hearing": "2023-01-01"
}

React代码： #

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import MyInput from './UI/input/MyInput';
import MyButton from './UI/button/MyButton';

const AddBusinessCard = ({ create }) => {
  const [formData, setFormData] = useState({
    original_name: '',
    author: '',
    case_category: '',
    article: '',
    pub_date: '',
    preliminary_hearing: '',
  });
  const [categoryList, setCategoryList] = useState([]);

  useEffect(() => {
    axios
      .get('http://localhost:8000/business_card/category/')
      .then(response => {
        setCategoryList(response.data);
      })
      .catch(error => {
        console.error('Error fetching category list:', error);
      });
  }, []);

  const handleChange = event => {
    const { name, value } = event.target;

    setFormData(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = event => {
    event.preventDefault();

    if (!formData.case_category) {
      console.error('Please select a category.');
      return;
    }

    const formattedData = {
      ...formData,
      preliminary_hearing: new Date(formData.preliminary_hearing).toISOString().split('T')[0],
      case_category: parseInt(formData.case_category),
    };

    axios
      .post('http://localhost:8000/business_card/businesscard/', formattedData)
      .then(response => {
        console.log('Business card added:', response.data);
        create(response.data);
        setFormData({
          original_name: '',
          author: '',
          case_category: '',
          article: '',
          pub_date: '',
          preliminary_hearing: '',
        });
      })
      .catch(error => {
        console.error('Error adding business card:', error);
      });
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <div style={{ width: '400px' }}>
        <h2>Add Business Card</h2>
        <form onSubmit={handleSubmit}>
          <MyInput
            type="text"
            name="original_name"
            value={formData.original_name}
            onChange={handleChange}
            placeholder="Номер дела"
          />
          <MyInput
            type="text"
            name="author"
            value={formData.author}
            onChange={handleChange}
            placeholder="Автор"
          />
          <select
            name="case_category"
            value={formData.case_category || ''}
            onChange={handleChange}
          >
            <option value="">Выберите категорию</option>
            {categoryList.map(category => (
              <option key={category.id} value={category.title}>
                {category.title}
              </option>
            ))}
          </select>
          <MyInput
            type="text"
            name="article"
            value={formData.article}
            onChange={handleChange}
            placeholder="Статья"
          />
          <MyInput
            type="text"
            name="pub_date"
            value={formData.pub_date}
            onChange={handleChange}
            placeholder="Дата создания (не заполнять!!!!)"
          />
          <MyInput
            type="text"
            name="preliminary_hearing"
            value={formData.preliminary_hearing}
            onChange={handleChange}
            placeholder="Дата предварительного заседания"
          />
          <MyButton type="submit">Создать новую карточку!</MyButton>
        </form>
      </div>
    </div>
  );
};

export default AddBusinessCard;

Django模型代码： #

class Category(models.Model):
    '''6. Модель категорий дела'''
    title = models.CharField(
        max_length=200,
        verbose_name='Название категории'
        )
    description = models.TextField(
        blank=True,
        null=True,
        verbose_name='Описание'
        )
    slug = models.SlugField(
        max_length=255,
        unique=True
        )

    class Meta:
        ordering = ('title',)
        verbose_name = 'Категория дела'
        verbose_name_plural = 'Категория дела'

    def __str__(self) -> str:
        return self.title

问题核心原因及修复步骤：

1. 下拉选项value值错误
   React代码里的<option>用了category.title作为value，但Django外键字段需要接收的是Category的id（整数类型），而非标题字符串。提交时parseInt(formData.case_category)会把标题字符串转成NaN，后端无法识别，最终存为null。
   修复：把<option>的value改成category.id：

   <option key={category.id} value={category.id}>
     {category.title}
   </option>
   

2. 表单验证逻辑优化
   当前if (!formData.case_category)的判断，若分类id为0（虽一般id从1开始，但不够严谨）会误判，可改成if (formData.case_category === '')，确保仅未选择分类时触发提示。

3. 序列化器配置检查
   确认Django的BusinessCard序列化器正确配置了case_category字段，确保它接收整数类型的id值，示例：

   # 假设你的BusinessCard模型包含case_category外键
   class BusinessCardSerializer(serializers.ModelSerializer):
       class Meta:
           model = BusinessCard
           fields = ['original_name', 'author', 'case_category', ...]
   

完成上述修改后，提交的case_category会是正确的id整数，后端就能正确关联对应的Category记录，不会再存为null。

内容的提问来源于stack exchange，提问作者Андрей