Прослушивателю событий требуется два клика, чтобы обновить DOM

Question

На моей веб-странице есть таблица с данными, которые извлекаются из базы данных - это в значительной степени клон базы данных. Каждая строка в таблице имеет одну кнопку удаления и одну кнопку обновления, что позволяет пользователю удалить соответствующую строку базы данных или обновить столбцы, используя предоставленную форму.

Моя проблема заключается в том, что кнопки удаления и обновления имеютне работают должным образом. Первый щелчок вносит соответствующие изменения в базу данных, но таблица остается неизменной до повторного нажатия кнопки.

let loadUsers = function () {
fetch("http://localhost:8080/users").then(function (response) {
    response.json().then(function (data) {
    // generate table and delete/update button html
    data.forEach(function (user) {
        deleteButton = document.querySelector("#btn-del-user);
        deleteButton.onclick = function () {
        if (confirm("Are you sure you want to delete " + user.firstname + "?")) {
            deleteUser(user.id);
            loadUsers();
        }
        });
    }
    });
};

loadUsers();


document.addEventListener('submit', function(event) {
  if (!event.target.matches('#update-user-form')) return;

  let elements = document.querySelector('#update-user-form').elements;
  let inputs = {
    "firstName": elements.firstName.value,
    "lastName": elements.lastName.value,
    "email": elements.email.value,
    "password": elements.password.value
  };
  let body = "";

  // create a URL-encoded string from form inputs
  Object.keys(inputs).forEach(function (key, i) {
    body += key + "=" + encodeURIComponent(inputs[key]);
    if (i < Object.keys(inputs).length - 1) {
      body += "&";
    }
  });

  let id = elements["user-id"].value;

  fetch('http://localhost:8080/users/' + id, {
    method: 'UPDATE',
    body: body,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

loadUsers();
});

Странная часть в том, что у меня есть отдельная форма на странице, которая позволяет мнедобавьте новые строки в таблицу / базу данных, и прослушиватель для этой формы также вызывает loadUsers(), но он успешно обновляет DOM после одного щелчка.

Answer 1

loadUsers потребуется дождаться завершения обновления / удаления, прежде чем снова загружать пользователей

try

fetch('http://localhost:8080/users/' + id, {
    method: 'UPDATE',
    body: body,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
}).then(loadUsers);