Блог

Обновить:

Исходный вывод JSON был таким:

 { "id": 8  "user": "k"  "name": "new"  "born": "2021-12-06"  "body_colour": [ 2 ]  "eye_colour": [ 2 ]  "image": [ 1 ] }  

Я изменил RatSeralizer на этот:

 class RatSerializer(FlexFieldsModelSerializer):  user = serializers.CharField(source='user.username')  body_colour = BodyColourSerializer(many=True)  eye_colour = EyeColourSerializer(many=True)  class Meta:  model = rat   exclude = ['bio']  

что изменило вывод JSON на этот, чего я и хотел:

 {  "id": 8,  "user": "k",  "body_colour": [  {  "name": "Fawn"  }  ],  "eye_colour": [  {  "name": "Black"  }  ],  "image": [  {  "name": "lineart",  "image": {  "small_square_crop": "http://localhost:8000/media/__sized__/images/lineart-crop-c0-5__0-5-50x50.PNG",  "thumbnail": "http://localhost:8000/media/__sized__/images/lineart-thumbnail-100x100.PNG",  "medium_square_crop": "http://localhost:8000/media/__sized__/images/lineart-crop-c0-5__0-5-400x400.PNG",  "full_size": "http://localhost:8000/media/images/lineart.PNG"  }  }  ],  "name": "new",  "born": "2021-12-06"  }  

Это именно то, что я хотел , вместо цифр он отображает полные данные (так в первом JSON было сказано "body_colour": [ 2 ] , теперь он отображает название цвета тела. Так там написано "body_colour": [ { "name": "Fawn" } ] . НО, когда я пытаюсь вызвать это в React, я получаю эту ошибку:

 Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.   27 |   28 | componentDidMount() {  29 | RatStuff.getRats().then((res) =gt; { gt; 30 | this.setState({ rats: res.data });  | ^ 31 | });  32 | }  

Таким образом, похоже, что в настоящее время он не читается как массив.

Original post: I’m using React frontend and Django backend. I’ve managed to make it so users can add rats to their account, however when I wanna fetch details about the rats the details are displayed as numbers, I’m assuming the id of the detail?

Here’s an example. This is what you get if you view one of the rats, frontend-wise:

 User: 12, Rat Name: newrat Rat Body colour: 3, Eye colour: 3  

So as you can see, you get the id (?) of each detail except the rat name. It belongs to the user with the id of 12, and the 3rd body colour created, etc.

Here’s my models:

 class EyeColour(models.Model):  name = models.CharField(max_length=255)    def __str__(self):  return self.name   class BodyColour(models.Model):  name = models.CharField(max_length=255)    def __str__(self):  return self.name  class rat(models.Model):  name = models.CharField(max_length=132, null =True)  body_colour = models.ManyToManyField(BodyColour, related_name='bodycolour')  eye_colour = models.ManyToManyField(EyeColour, related_name='eyecolour')  user = models.ForeignKey(User, on_delete=models.CASCADE, null = True)  def __str__(self):  return self.name  

Serializers:

 class EyeColourSerializer(FlexFieldsModelSerializer):  class Meta:  model = EyeColour  fields = '__all__'    class BodyColourSerializer(FlexFieldsModelSerializer):  class Meta:  model = BodyColour  fields = '__all__'   class RatSerializer(FlexFieldsModelSerializer):  class Meta:  model = rat  # fields = '__all__'   exclude = ['bio']  # read_only_fields = ['eye_colour', 'body_cdolour']  expandable_fields = {  'EyeColour': ('accounts.EyeColourSerializer', {'many': False}),  'Image': ('accounts.ImageSerializer', {'many': False}),  }  

and views:

 class ratViewset(FlexFieldsMixin, ReadOnlyModelViewSet):   serializer_class = RatSerializer  queryset = rat.objects.all()  

Finally, this is part of the viewRats.jsx file, the one you access to view each rat:

 class viewRat extends Component {  constructor(props) {  super(props);   this.state = {  id: this.props.match.params.id,  rat: {},  };  }   componentDidMount() {  RatStuff.getRatById(this.state.id).then((res) =gt; {  this.setState({ rat: res.data });  });  }  ....  lt;div className="row"gt;  lt;labelgt; User: lt;/labelgt;  lt;divgt; {this.state.rat.user}lt;/divgt;  lt;/divgt;  lt;div className="row"gt;  lt;labelgt; Rat Name: lt;/labelgt;  lt;divgt; {this.state.rat.name}lt;/divgt;  lt;/divgt;  lt;div className="row"gt;  lt;labelgt; Rat Body colour: lt;/labelgt;  lt;divgt; {this.state.rat.body_colour}lt;/divgt;  lt;/divgt;  lt;div className="row"gt;  lt;labelgt; Eye colour: lt;/labelgt;  lt;divgt; {this.state.rat.eye_colour}lt;/divgt;  lt;/divgt;  

Я совершенно новичок в этом деле. Что я делаю, чтобы это отображалось в виде цифр/идентификатора каждой вещи?

В сериализаторе добавьте поле сериализатора с source атрибутом для пользователя. для полей «много ко многим» вы должны установить значение «много» =True, которое вернет список всех связанных сериализованных объектов

 class EyeColourSerializer(FlexFieldsModelSerializer):  class Meta:  model = EyeColour  fields = '__all__'    class BodyColourSerializer(FlexFieldsModelSerializer):  class Meta:  model = BodyColour  fields = '__all__'   class RatSerializer(FlexFieldsModelSerializer):  user = serializers.CharField(source='user.username')  body_colour = BodyColourSerializer(many=True)  eye_colour = EyeColourSerializer(many=True)  class Meta:  model = rat  # fields = '__all__'   exclude = ['bio']  # read_only_fields = ['eye_colour', 'body_cdolour']