国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

ReactJS - Fungsi pengembalian cangkuk tersuai tidak menyimpan data sebenar keadaan dalaman
P粉729436537
P粉729436537 2023-09-12 08:49:22
0
1
614

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 baharu
  • remove: Berfungsi untuk mendapatkan ID pemberitahuan dan memadamkan pemberitahuan
  • contextHandler: JSX diserahkan kepada pemaparan komponen

Apabila 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

P粉729436537
P粉729436537

membalas semua(1)
P粉478188786

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:

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan