axios.patch и проблемы с загрузкой данных

Question

Я новичок, чтобы отреагировать, но мой первый стек MERN - простое приложение в стиле.

Пока мои функции post и delete работают нормально, а функция getData () запускается так,моя папа обновляется новым списком «заметок», это не относится к моей функции обновления.

Пока заметка успешно обновляется в базе данных, папка не перезагружается с новыми обновленными данными, хотя я поместил функцию getData там ...

Я думаю, что проблема в том, что запрос на исправление отстает, поэтому функция getData срабатывает до того, как обновленные данные будут фактически в базе данных ...

Есть какие-нибудь решения?Я опубликовал только мой основной файл app.js и мои маршруты.

Как правильно решить эту проблему?Я понимаю, что мог бы попробовать задержку, но это кажется немного хакерскимawait axios.patch ('http://localhost:5000/'+ _id, updatedNote) .then (console.log (' item '+ _id +' было обновлено ')) .then (this.loadData ())}

--- APP.js ---

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import Note from './components/note.js';
import Form from './components/form.js';
import EditBox from './components/editBox.js';


class App extends Component {

  state = {
    notes: [],
    dataLoaded: false,
    toggleEditBox: false,
    noteToEdit: null,
    noteToEditContent: null,
  }

//CDM which triggers first load
 componentDidMount() {
  this.loadData()
 }

//function for loading our data from the db when required
async loadData()  {
   await axios.get('http://localhost:5000/notes')
   .then(response => {
    const notes = response.data.reverse();
    console.log("fetched")
    this.setState({ notes: notes, dataLoaded: true, toggleEditBox: false })
  })
 }

//ADD NOTE to the database
async addNote(noteContent)  {
  const newNote = {
  content: noteContent
  }
 await axios.post('http://localhost:5000/', newNote)
 .then(post => console.log('item ' + post.data._id + ' has been added'))
 this.loadData()
}

//DELETE NOTE from the database
async deleteNote(_id)  {
  await axios.delete('http://localhost:5000/'+_id)
 .then(post => console.log('item ' + _id + ' has been deleted'))
 this.loadData()
}


//Function to open edit box
triggerEditBox(_id, content) {
  this.setState({ toggleEditBox: true, noteToEdit: _id, noteToEditContent: content})
}

//UPDATE NOTE
async updateNote(_id, newNoteContent) {
  const updatedNote = {
    content: newNoteContent
  }
 await axios.patch('http://localhost:5000/'+ _id, updatedNote)
 .then(console.log('item ' + _id + ' has been updated'))
 .then(this.loadData())

}



 render() {

  let notes;

  if (this.state.dataLoaded) {
    notes = 
     <div className="note-container">
       {this.state.notes.map(note => 
       <Note
        content={note.content}
        deleteNote={() => this.deleteNote(note._id)}
        triggerEditBox={() => this.triggerEditBox(note._id, note.content)}
     />)}
   </div>

  } else if (!this.state.dataLoaded) {
    notes = <h3>Loading</h3>
  }


//editbox
  let editBox;

  if (this.state.toggleEditBox) {
    editBox = 
    <EditBox 
    content={this.state.noteToEditContent}
    _id={this.state.noteToEdit}
    updateNote={(_id, newNoteContent) => this.updateNote(_id, newNoteContent)}/>
  }


  return (
    <div className="App">

      {editBox}

      <Form onSubmit={(noteContent) => this.addNote(noteContent)}/>

      {notes}

    </div>
   );
  }

}
export default App;

--- МАРШРУТЫ ---

    const express = require('express');
    const router = express.Router();

    const Note = require('../../models/Note') // Pull in our Note model

    router.get('/', function (req, res) {
      res.send('Hello, soon I will be a MERN stack app!')
    });

    // GET = RETRIEVE ALL NOTES

    router.get('/notes', (req, res) => {
        Note.find()
        .then(notes => res.json(notes));
    });

    // POST = ADD A NOTE TO THE DB
    // as the root of the route '/notes' is already defined in the server.js we dont need to have here

    router.post('/', (req, res) => {
      const newNote = new Note({
        content: req.body.content
      });
      newNote.save().then(note => res.json(note));
    });

    // DELETE = DELETE A NOTE FROM THE DB
    // we add the property param:id

    router.delete('/:id', (req, res) => { 
      Note.findById(req.params.id)
      .then(item => item.remove().then(() => res.json({ success: true })))
      .catch(err => res.status(404).json({ success: false }));
    });


    // UPDATE = UPDATE A NOTE IN THE DB
    router.patch('/:id', (req, res) => {
      Note.findById(req.params.id)
      .then(item => item.update({ content: req.body.content }));
    });


    // we cant use 'export default' in this particular file
    module.exports = router;

Спасибо !!!