Reactjs 如何基于外键选择在多个数组中循环

我正在尝试创建一个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')

这是我的模特

 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

这是我的观点

  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]

所以，在后端，服务模型

• 前端
• 后端
• 部署

我的技术和框架已经

• 德扬戈
• 反应JS
• 码头工人
• 摇摆
• 引导
• 博士后

我想循环介绍基于服务的技术和框架

所以输出应该是这样的

前端

• 反应JS
• 摇摆
• 引导

后端

• 德扬戈
• 博士后

部署

• 码头工人

如何实现这种格式

目前，我的react代码就是这样的

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>

const[service，setService]=useState（[]）；
const[framework，setFramework]=useState（[]）；
useffect（（）=>{
取回（“http://localhost:8000/api/work/service")
.然后（（res）=>res.json（））
.然后（设置服务）；
取回（“http://localhost:8000/api/work/f&t")
.然后（（res）=>res.json（））
.然后（setFramework）；
}, []);
{框架&&
服务&&
framework.map（（项目、索引）=>{
console.log（框架）
返回(
{服务[项目]}
{item.title}
);
})}

---

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

在Django中，如果两个模型之间存在1-M关系，Django会添加一个属性，因此您可以使用1模型访问M相关的对象，它总是带有名称

x\u集

其中

x>模型名称小写

，您还可以重命名它，以便使用正确的名称访问它

因此，我建议您重命名

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

现在，在添加
相关的\u名称之后，只需在
服务序列化程序中引用它，并使用
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", ...
    ]
 },
....
]


尝试将.then方法更改为-->.then（response=>setService（response））Radwan Abu Odeh建议的解决方案适合我。谢谢@nir shabi的回复。非常感谢Radwan的帮助。这就是我所需要的。谢谢你解释了所有的步骤。但是你能告诉我我们在这里实际做什么吗technologies=serializers.SlugRelatedField（read\u only=True，many=True，slug\u field='title'）。抱歉，我是django的新手。是的，当然，所以
SlugRelatedField
，基本上是DRF在Relationship上映射相关字符串的一种方法，
many=True
表示字段是多个关系，结果将是多个字符串，
slug\u field
是告诉DRF从每个模型对象中的哪个字段获取值，
read\u only=True
是告诉DRF该字段将不接受关于此关系的写入请求。我还建议您阅读此文档，它将进一步详细解释这一点。谢谢