Semua,

Saya memiliki aplikasi sederhana yang mengambil data pada klik tombol dari API jarak jauh dan mengisi teks ke dalam elemen HTML saat data diambil. Masalahnya adalah begitu saya mengklik tombol, data lama hilang dan ada penundaan antara rendering data baru dan data lama, di mana halaman terlihat tidak bagus.

Bagaimana saya harus memodifikasi kode saya untuk mencegah data lama hilang sampai saya siap untuk menulis yang baru?



document.querySelector('#next-album').addEventListener('click', (e) => {
  e.preventDefault();
  fetch('http://localhost:3000/random')
    .then((response) => response.json())
    .then(data => {
      displayRandomAlbum(data);
      displayAlbums(data.artistAlbums, relatedArtistAlbumsContainer);
      displayAlbums(data.onThisYear, relatedYearAlbumsContainer);
    });
});
0
vdmclcv 12 Mei 2021, 14:07

1 menjawab

Jawaban Terbaik

Sepertinya Anda mengalami masalah dengan Postback.

Tambahkan stopPropagation ke kode Anda, seperti ini:

...
e.preventDefault();
e.stopPropagation();
...

Ini untuk menghindari perilaku postback default dari tombol

1
R44 12 Mei 2021, 11:21