React通过Axios向Django ArrayField提交数据报错求助

用户希望在发布文章后，将文章ID存入User模型的ArrayField中，以便查看用户的文章列表。此前存储单个ID功能正常，但改为ArrayField后，发起请求时出现以下错误：

response: "{\"posts_written\":{\"0\":[\"Expected a list of items but got type \\\"str\\\".\"]}

当前前端请求代码：

let newPost = new FormData()
newPost.append('title', title)
newPost.append('content', content)
updatePostList.append('posts_written', id + ',')
await API.patch(`/profile/user/${loggedInProfile.id}/update/`, updateArticleList, {
  headers: {
    'Authorization': `Token ${sessionToken}`,
    'Content-Type': 'multipart/form-data',
  },
})

User模型代码：

class User(AbstractUser):
    id = models.CharField(max_length=36, default=generate_unique_id, primary_key=True)
    username = models.CharField(max_length=250, unique=True) 
    profile_image = models.ImageField(upload_to='profile_images', default='/profile_images/DefaultAvatar.png')
    bio = models.CharField(max_length=500, default='', blank=True, null=True)
    display_name = models.CharField(max_length=250, blank=True, null=True)
    articles_written = ArrayField(
        ArrayField(models.CharField(max_length=36, blank=True, null=True)),
    )

尝试过用JS对象包裹ID、参考Django Admin用逗号分隔存值，均未解决问题，需指导编写适配ArrayField的正确请求。

1. 修正模型定义（核心问题） #

你的articles_written定义了嵌套的二维数组（ArrayField嵌套ArrayField），但实际需求是存储单个文章ID的一维数组。如果不需要嵌套结构，应修改为：

articles_written = ArrayField(
    models.CharField(max_length=36, blank=True, null=True),
    default=list,  # 设置默认值为空列表，避免初始化异常
    blank=True
)

若确实需要二维数组（比如按分类存储文章ID），则前端需传递对应格式的数据。

2. 前端请求的正确写法 #

情况一：模型改为一维数组（推荐） #

方法A：FormData多次追加单个ID

直接用FormData的append方法多次添加同一个键，Django会自动解析为数组：

// 假设updatePostList是FormData实例
updatePostList.append('articles_written', id);
// 若要追加多个ID，重复调用append即可：
// updatePostList.append('articles_written', id1);
// updatePostList.append('articles_written', id2);

await API.patch(`/profile/user/${loggedInProfile.id}/update/`, updatePostList, {
  headers: {
    'Authorization': `Token ${sessionToken}`,
    // 无需手动设置Content-Type，axios会自动处理FormData的请求头
  },
})

方法B：传递JSON格式（更直观）

如果后端支持JSON请求，直接传递数组（需确保序列化器兼容）：

await API.patch(`/profile/user/${loggedInProfile.id}/update/`, {
  // 把新ID追加到现有文章ID列表中
  articles_written: [...loggedInProfile.articles_written, id]
}, {
  headers: {
    'Authorization': `Token ${sessionToken}`,
    'Content-Type': 'application/json',
  },
})

情况二：保持模型的二维数组 #

若确实需要嵌套结构，前端需传递二维数组格式：

await API.patch(`/profile/user/${loggedInProfile.id}/update/`, {
  // 新增一个包含当前文章ID的子数组
  articles_written: [...loggedInProfile.articles_written, [id]]
}, {
  headers: {
    'Authorization': `Token ${sessionToken}`,
    'Content-Type': 'application/json',
  },
})

3. 序列化器配置（DRF场景） #

如果使用Django REST Framework，需确保序列化器字段配置匹配数组结构：

from rest_framework import serializers

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['articles_written', ...]
    
    # 若为二维数组，需显式定义嵌套结构
    # articles_written = serializers.ListField(
    #     child=serializers.ListField(child=serializers.CharField())
    # )

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