Saya mempunyai cangkuk tersuai useNotifications
untuk widget pemberitahuan. Cangkuk ini mengembalikan tatasusunan yang mengandungi elemen seterusnya (ia serupa dengan api pemesejan ant.design):
add
: Berfungsi untuk menambah pemberitahuan baharuremove
: Berfungsi untuk mendapatkan ID pemberitahuan dan memadamkan pemberitahuancontextHandler
: JSX diserahkan kepada pemaparan komponenApabila pengguna memanggil add
, mereka mendapat ID yang boleh digunakan untuk memadam pemberitahuan
Soalan ini khusus mengenai fungsi padam. Memandangkan saya memanggil fungsi ini sejurus selepas menambah pemberitahuan baharu, fungsi tersebut menerima salinan senarai lama, jadi tiada unsur baharu dan ralat dilemparkan. Bagaimanakah saya boleh membetulkannya supaya komponen menggunakan API yang sama?
gunakan cangkuk Pemberitahuan Macam mana nak guna
Codesandbox (untuk ujian, saya lakukan setTimeout
,它在3秒內(nèi)調(diào)用了remove()
): https://codesandbox.io/s/goofy-smoke-5q7dw3?file=/src/App.js:405-440
Anda boleh membuat status remove
函數(shù)使用 狀態(tài)更新器功能,可以訪問最新的狀態(tài)值。這允許您在組件在 remove()
中重新渲染之前訪問新的 list
anda.
Nota: Anda sedang menukar keadaan asal dengan menukar isMounted
屬性設(shè)置為 false
objek bersarang. Walaupun anda menyalin tatasusunan, anda juga harus menyalin objek yang sedang dikemas kini untuk mengelakkan isu pemaparan semula.
Berikut ialah beberapa pengubahsuaian tentang cara mengakses nilai terkini negeri dan mengelakkan mutasi keadaan:
const add = useCallback((params) => { const id = v4(); const element = {...params, id, isMounted: true}; setList(list => [...list, element]); // Add your new element while also making a copy of the current state (`list`) return id; }, []); const remove = useCallback((elementId) => { setList((list) => list.map((elem) => elem.id === elementId ? { ...elem, isMounted: false } : elem ) ); setTimeout(() => { setList((list) => list.filter((elem) => elem.id !== elementId)); }, 500); }, []);
Lihat contoh di bawah: