在序列化的 DRF 中反应映射数组，具有多域关系和 StringRelatedField答案

【问题标题】：React map array inside serialized DRF with a manytomanyfield relation and StringRelatedField在序列化的 DRF 中反应映射数组，具有多域关系和 StringRelatedField
【发布时间】：2020-07-02 21:48:57
【问题描述】：

在我的 Django DRF 序列化程序中，我试图用 React 中的一个对象映射一个数组。序列化器.py

class AssessmentSerializer(serializers.ModelSerializer):
    objective = serializers.StringRelatedField(
        many=True,
    )

    class Meta:
        model = Assessment
        fields = ['id', 'name', 'date_completed', 'objective']

DRF 的状态看起来不错：

{
  grades: {
    grades: [
      {
        id: 7,
        name: 'Quiz 4',
        date_completed: '2020-03-17',
        objective: [
          "kin.2",
          "kin.1"
        ]
      }
    ]
  }
}

但是我试图在我的 JSX 表中分离出 kin.2 和 kin.1：

<tbody>
  {this.props.grades.map(grade => (
    <tr key={grade.id}>
      <td>{grade.id}</td>
      <td>{grade.name}</td>
      <td>{grade.date_completed}</td>
      <td>
        <ul>
          <li>{grade.objective}</li>
        </ul>
      </td>
    </tr>
  ))}
</tbody>

目前“kin.1”和“kin.2”在同一行打印，文本之间没有空格。我也试过：

<tbody>
  {this.props.grades.map(grade => (
    <tr key={grade.id}>
      <td>{grade.id}</td>
      <td>{grade.name}</td>
      <td>{grade.date_completed}</td>
      <td>
        <ul>
          {grade.objective.map(obj => (
            <li>{obj.objective}</li>
          ))}
        </ul>
      </td>
    </tr>
  ))}
</tbody>

这很接近，尽管它迭代了正确的次数，但列表是空的。我必须用“目标”序列化某种类型的索引吗？

【问题讨论】：

标签： reactjs django-rest-framework serialization

【解决方案1】：

grade.objective 是一个列表，所以obj.objective 不起作用。而是使用obj

<tbody>
  {this.props.grades.map(grade => (
    <tr key={grade.id}>
      <td>{grade.id}</td>
      <td>{grade.name}</td>
      <td>{grade.date_completed}</td>
      <td>
        <ul>
          {grade.objective.map(obj => (
            <li>{obj}</li>
          ))}
        </ul>
      </td>
    </tr>
  ))}
</tbody>

【讨论】：