Ini sulit untuk dijelaskan jadi saya akan melakukan yang terbaik!

Tujuanku

Saya telah mempelajari Bereaksi dan memutuskan untuk mencoba membuat Aplikasi Daftar Todo dari awal. Saya ingin menerapkan sistem "pemberitahuan push", yang ketika Anda mengatakan tandai tugas sebagai selesai, itu akan muncul di sudut kiri bawah mengatakan misalnya "jalankan anjing telah diperbarui". Kemudian setelah beberapa detik atau lebih itu akan dihapus dari UI.

Sasaran yang cukup sederhana, dan sebagian besar saya telah membuatnya bekerja... TAPI... jika Anda dengan cepat menandai beberapa tugas sebagai selesai, mereka akan dihapus dari UI dan kemudian dirender ulang kembali!

Saya telah mencoba banyak cara berbeda untuk menghapus item dari status yang dapat saya pikirkan dan bahkan mengubah tempat komponen ditarik, dll.

Ini mungkin pertanyaan noobie, tapi saya masih belajar!

Berikut ini tautan ke kotak pasir kode, cara terbaik yang dapat saya pikirkan untuk menunjukkan di mana saya berada:

Status Komponen Peringatan/Induk

https://codesandbox.io/s/runtime-night-h4czf?file=/src/components/layout/PageContainer.js

Komponen Peringatan

https://codesandbox.io/s/runtime-night-h4czf?file=/src/components/parts/Alert.js

Bantuan apa pun sangat dihargai!

0
Rob Cipolla 9 Januari 2021, 06:13

3 jawaban

Jawaban Terbaik

Jika peristiwa asinkron terjadi, nilai dalam cakupan pengendali peristiwa yang dieksekusi mungkin sudah usang.

Saat memperbarui daftar nilai, gunakan metode pembaruan yang menerima status sebelumnya, misalnya

setAlerts(previousAlerts => {
  const newAlerts = (build new alerts from prev alerts);
  return newAlerts;
});

Daripada langsung menggunakan alerts yang Anda dapatkan dari useState.

0
Hero Wanders 9 Januari 2021, 16:25

Saat Anda memanggil fungsi set untuk memperbarui status, itu akan memperbarui dari nilai yang terakhir diberikan. Jika Anda ingin memperbarui dari nilai yang ditetapkan terakhir, Anda harus meneruskan fungsi pembaruan, bukan hanya nilai baru.

Misalnya, Anda dapat mengubah setTodos di fungsi markComplete Anda menjadi seperti ini.

           setTodos(todos => todos.map((todo) => {
                if (id === todo.id) {
                    todo = {
                        ...todo,
                        complete: !todo.complete,
                    };
                }
                return todo;
            }));

https://codesandbox.io/s/jovial-yalow-yd0jz

1
Todd Skelton 9 Januari 2021, 03:29

Di PageContainer.js, ubah fungsi ini

const removeAlert = (id) => {
  setAlerts(alerts.filter((alert) => alert.id !== id));
};

Untuk ini

const removeAlert = (id) => {
  setAlerts(prev => prev.filter((alert) => alert.id !== id));
};

Ini juga akan memperbaiki masalah saat menghapus centang pada todos yang diselesaikan dengan kecepatan tinggi

0
Ray Chan 9 Januari 2021, 03:43