序列化的DRF中的反应图数组，具有多场字段关系和StringRelatedField

Question

[从我的Django DRF序列化器，我试图在React中用对象映射一个数组。serializer.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>

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

Answer 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>