Реагирует массив карт внутри сериализованного DRF с отношением множества полей и StringRelatedField - PullRequest
Новая
       35

Реагирует массив карт внутри сериализованного DRF с отношением множества полей и StringRelatedField

0 голосов
/ 22 марта 2020

Из моего 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"
        ]
      }
    ]
  }
}

Но Я пытаюсь разделить kin.2 и kin.1 в моей таблице JSX: 

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

Это близко, список пуст, хотя он повторяет правильное количество раз. Должен ли я сериализовать какой-то тип индекса с помощью «target»?

1 Ответ

1 голос
/ 22 марта 2020

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