来自 django 的对象显示为数字/ID

Question

更新：

原来的 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) => {
> 30 |     this.setState({ rats: res.data });
     | ^  31 |   });
  32 | }

所以它目前似乎没有被读取为数组。

---

原帖： 我正在使用 React 前端和 Django 后端。我已经设法让用户可以将老鼠添加到他们的帐户中，但是当我想获取有关老鼠的详细信息时，详细信息显示为数字，我假设详细信息的 id？

这是一个例子。如果您从前端查看其中一只老鼠，这就是您所得到的：

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

如您所见，您获得了除老鼠名称之外的每个细节的 id (?)。它属于 id 为 12 的用户，以及创建的第 3 个体色等。

这是我的模型：

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

序列化器：

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

和观点：

class ratViewset(FlexFieldsMixin, ReadOnlyModelViewSet):

    serializer_class = RatSerializer
    queryset = rat.objects.all()

最后，这是 viewRats.jsx 文件的一部分，您可以通过该文件查看每只老鼠：

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) => {
      this.setState({ rat: res.data });
    });
  }

....

<div className="row">
              <label> User: </label>
              <div> {this.state.rat.user}</div>
            </div>
            <div className="row">
              <label> Rat Name: </label>
              <div> {this.state.rat.name}</div>
            </div>
            <div className="row">
              <label> Rat Body colour: </label>
              <div> {this.state.rat.body_colour}</div>
            </div>
            <div className="row">
              <label> Eye colour: </label>
              <div> {this.state.rat.eye_colour}</div>
            </div>

我对这些东西很陌生。我在做什么，让它显示为数字/每件事的 id？

Answer 1

在序列化器中为用户添加一个带有source 属性的序列化器字段。对于多对多字段，您必须设置 many=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']