Как создать экземпляр объекта, содержащий внешний ключ с избыточным и Django Rest?

Question

Я создаю простой API, который позволяет ученику добавлять свои оценки на основе предмета. Например, у меня было 16/20 в математике, поэтому я хочу, чтобы приложение, с помощью формы, позволяло вводить мой счет и предмет. В коде предметом является модель Matiere! (subject = matiere)

Вот моя модель заметки:

class Note(models.Model):
note = models.FloatField(
    default=10
)
coefficient = models.PositiveIntegerField(
    default=1,
    validators=[MaxValueValidator(20), MinValueValidator(0)]
)
user = models.ForeignKey(
    settings.AUTH_USER_MODEL,
    on_delete=models.CASCADE
)
date = models.DateTimeField(auto_now_add=True)

#Generic Relation
matiere = models.ForeignKey(
    'Matiere.Matiere',
    on_delete = models.CASCADE,
    default=1
)
objects = NoteManager()

def __str__(self):
    return f"{self.note} coefficient {self.coefficient}"

Я использую React & Redux и Django Rest. С помощью ax ios я могу легко выполнить запрос на получение, но теперь я сталкиваюсь с проблемой при публикации новой заметки:

На основе формы HTML, содержащей следующие поля: Score и matiere (раскрывающееся поле выбора), каков наилучший способ создания нового экземпляра Note? Матье на самом деле является внешним ключом, и я не знаю, как мне с ним обращаться.

Вот форма:

    class AddNote extends Component {
  constructor(props){
    super(props);
    this.state = {
      note: "",
      coef: "",
      matiere: ""
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount(){
    this.props.get_all_matieres();
  }

  handleChange = e => {
    this.setState({
      [e.target.name] : e.target.value
    })
  }

  handleSubmit = e => {
    e.preventDefault();
    let { note, coef, matiere} = this.state;
    note = parseInt(note);
    coef = parseInt(coef);
    let note_obj = {note, coef};
    const object = this.props.get_matiere(matiere);
    console.log(object);
    this.props.postNote({note,coef});
  }

  render(){
    return(
      <div>
        <h1>Ajouter une note</h1>
        <form>
          <label>Votre Note</label>
          <input name="note" onChange={this.handleChange}/>
          <label>Votre coef</label>
          <input name="coef" onChange={this.handleChange}/>
          <button type="submit" onClick={this.handleSubmit}>Submit</button>
          <select name="matiere" onChange={e => this.handleChange(e)} value= 
            {this.state.matiere}>
            {
              this.props.matieres.map(matiere => (
                <option>
                  {matiere.nom}
                </option>
              ))
            }
          </select>
        </form>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  notes: state.notes.notes,
  matieres: state.matieres.matieres
})


export default connect(mapStateToProps, {postNote, get_all_matieres, get_matiere})(AddNote); 

Я понятия не имею, как создать свое действие. js для публикации объекта заметки

Извините за мой английский sh: /