使用 Axios 从 React 到 Django 中将 CharField 发布到 ArrayField答案

【问题标题】：Post a CharField to an ArrayField in from React to Django using Axios使用 Axios 从 React 到 Django 中将 CharField 发布到 ArrayField
【发布时间】：2022-11-11 06:35:38
【问题描述】：

我正在尝试创建一个功能，如果用户写帖子，帖子的 ID 会进入 User 模型中的 ArrayField，以便可以访问他们的写作列表。

我在用户数据库中引入了一个新列，进行了必要的迁移并试用了这个功能，只保存了一个运行良好的帖子 ID。当我将模型字段设为 ArrayField 时，问题就出现了。现在，当我执行 POST 请求时，出现错误

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',
        },
      })

我不确定如何编写与 ArrayField 一起使用的 POST 请求，我在网上寻找答案但找不到任何东西。我还尝试将 id 包装在 JS 对象括号中，但它不起作用。我通过使用 Django 管理面板看到手动添加到 articles_written 字段并使用 , 分隔值将它们保存在单独的数组索引中，这就是为什么我在 id 中附加了 ,。不过，我现在没有主意了。

如果有帮助，这是用户模型

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)),
    )

谢谢

【问题讨论】：

请别使用ArrayField，使用ManyToManyFields...
我看不到ManyToMany 在这里如何工作，因为只有一个User 创建帖子。一个User 可以创建许多帖子。我可以在Post 模型中有一个ForeignKey 字段来模拟OneToMany 关系，但它似乎不够优雅，无法遍历所有帖子以查看哪个User 制作了哪个。一定会有更好的办法。 @WillemVanOnsem 你能扩展你的答案吗？

标签： reactjs arrays django axios

【解决方案1】：

几个小时后，我终于找到了一个解决方案，所以发布以防万一将来有人遇到这个问题

我放弃了尝试从前端执行此操作，并认为如果可以从后端更新 User 模型会更有效。

我在 Post 模型中添加了一个 ForeignKey 字段来模拟一对多关系。

class Post(models.Model)::
    id = models.CharField(max_length=36, default=gen_uuid, primary_key=True)
    content = models.TextField(default='content')
    author = models.ForeignKey(User, on_delete=models.CASCADE)

然后在用户序列化程序中，我通过查询 Post 集添加了新字段。

class UserSerializer(serializers.ModelSerializer):
    post_set = PostSerializer(many=True, read_only=True)
    class Meta:
        fields = (
            'id',
            'username',   
            'post_set'
        )
        model = User

现在关系已经建立

【讨论】：