reactjs - 如何根据外键选择循环遍历多个数组

Question

我正在尝试创建一个 django react 应用程序。我正在尝试从 django 获取数据以做出反应。我被困在需要循环多个数组的地方。

这是我的serializer.py

class ServiceSerializer(serializers.ModelSerializer):
    class Meta:
        model = Service
        fields = ('id', 'title', 'description')


class TechnologiesAndFrameworkSerializer(serializers.ModelSerializer):
    class Meta:
        model = TechnologiesAndFramework
        fields = ('id', 'title', 'description', 'service')

这是我的models.py

 class Service(models.Model):
    title = models.CharField(blank=False, null=False, max_length=256)
    description = models.CharField(blank=False, null=False, max_length=256)

    def __str__(self):
        return self.title

 class TechnologiesAndFramework(models.Model):
    title = models.CharField(blank=False, null=False, max_length=256)
    description = models.CharField(blank=False, null=False, max_length=256)
    service = models.ForeignKey(Service, on_delete=models.CASCADE, null=True)

    def __str__(self):
        return self.title

这是我的意见.py

  class ServiceViewSet(viewsets.ModelViewSet):
      serializer_class = ServiceSerializer
      queryset = Service.objects.all()
      permission_classes = [permissions.AllowAny]


   class TechnologiesAndFrameworkViewSet(viewsets.ModelViewSet):
      serializer_class = TechnologiesAndFrameworkSerializer
      queryset = TechnologiesAndFramework.objects.all()
      permission_classes = [permissions.AllowAny]

所以在后端，服务模型有

• 前端
• 后端
• 部署

我的 TechnologiesAndFramework 有

• 姜戈
• 反应 JS
• 码头工人
• 鹡鸰
• 引导程序
• Postgres

我想基于服务循环遍历 TechnologiesAndFramework。

所以输出应该是这样的。

1. 前端

   • 反应 JS
   • 鹡鸰
   • 引导程序

2. 后端

   • 姜戈
   • Postgres

3. 部署

   • 码头工人

我怎样才能实现这种格式？

目前这就是我的反应代码的样子

const [service, setService] = useState([]);
  const [framework, setFramework] = useState([]);

  useEffect(() => {
    fetch("http://localhost:8000/api/work/service")
      .then((res) => res.json())
      .then(setService);
    fetch("http://localhost:8000/api/work/f&t")
      .then((res) => res.json())
      .then(setFramework);
  }, []);

  <div className="progress-bars">
            {framework &&
              service &&
              framework.map((item, index) => {
                console.log(framework)
                return (
                  <>
                    <h1>{service[item]}</h1>
                    <h1>{item.title}</h1>
                  </>
                );
              })}
          </div>

任何帮助，将不胜感激。提前致谢。

标签： reactjsdjangodjango-modelsdjango-rest-frameworkdjango-views

Answer 1

在 Django 中，如果两个模型之间存在1-M 关系，Django 会添加一个属性，以便您使用1 个模型访问M 相关的对象，它总是带有名称x_setwhere x -> the model name lowercase，您也可以重命名它以便访问它带有正确的名称。

所以我建议你重命名你的属性models.py：

...

 class TechnologiesAndFramework(models.Model):
    ...
    # like this, just add related_name attribute.
    service = models.ForeignKey(Service, on_delete=models.CASCADE, null=True, related_name='technologies')
....

现在做makemigrations，并且migrate

现在在你添加related_name只是引用它之后ServiceSerializer，SlugRelatedField像这样：

class ServiceSerializer(serializers.ModelSerializer):
    technologies = serializers.SlugRelatedField(read_only=True, many=True, slug_field='title')
    class Meta:
        model = Service
        fields = ('id', 'title', 'description', 'technologies')

现在您的响应应如下所示：

[
 { 
    "id": "your_service_id", 
    "title": "backend for example", 
    "description": "Your description",
    "technologies": [
        "Django", "Postgres", ...
    ]
 },
....
]