Django关联字段序列化返回ID 修改后React报对象不可作为子元素问题咨询

1. 初始配置关联字段仅返回ID的原因 #

• DRF（Django REST Framework）默认行为：对于外键、多对多等关联字段，如果没有显式指定对应的序列化器，默认会使用PrimaryKeyRelatedField，仅序列化返回关联记录的主键ID。
• 你使用的FlexFieldsModelSerializer的expandable_fields属于懒加载配置，仅当接口请求携带expand参数时才会展开对应关联字段，未传参时默认只返回主键。
• 初始配置的expandable_fields键名和模型实际字段名不匹配：比如模型字段名为eye_colour、body_colour，你配置的键是EyeColour，拼写不对应，即使传了expand参数也无法正常展开字段。

2. 修改序列化器后React报错的原因与解决方法 #

报错原因 #

你修改序列化器后，body_colour、eye_colour返回的是对象数组，而你的React代码直接将数组对象作为子元素渲染（{this.state.rat.body_colour}），React不支持直接把JS对象作为可渲染的子元素，因此抛出对应错误。

解决方案 #

可任选以下两种方案实现：

方案1：前端适配处理（推荐，保留结构化数据方便后续扩展功能）

修改React渲染逻辑，遍历数组提取name字段展示，同时添加可选链避免初始加载时空值报错：

<div className="row">
  <label> Rat Body colour: </label>
  <div> {this.state.rat.body_colour?.map(item => item.name).join('、')}</div>
</div>
<div className="row">
  <label> Eye colour: </label>
  <div> {this.state.rat.eye_colour?.map(item => item.name).join('、')}</div>
</div>

如果需要单独给每个颜色加样式，也可以单独渲染为标签元素：

<div className="row">
  <label> Rat Body colour: </label>
  <div> 
    {this.state.rat.body_colour?.map((colour, idx) => (
      <span key={idx} className="colour-badge">{colour.name}</span>
    ))}
  </div>
</div>

方案2：后端序列化直接返回字符串数组

修改Django序列化器，直接将关联字段处理为字符串数组返回，前端无需额外处理：

class RatSerializer(FlexFieldsModelSerializer):
    user         = serializers.CharField(source='user.username')
    body_colour  = serializers.SerializerMethodField()
    eye_colour   = serializers.SerializerMethodField()
    class Meta:
        model = rat 
        exclude = ['bio']
    
    def get_body_colour(self, obj):
        return [item.name for item in obj.body_colour.all()]
    
    def get_eye_colour(self, obj):
        return [item.name for item in obj.eye_colour.all()]

修改后接口返回的body_colour格式为["Fawn"]，前端直接拼接展示即可。

内容的提问来源于stack exchange，提问作者Kida