ReactJS - Fungsi pengembalian cangkuk tersuai tidak menyimpan data sebenar keadaan dalaman

Question

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秒内调用了remove()): https://codesandbox.io/s/goofy-smoke-5q7dw3?file=/src/App.js:405-440

Answer 1

Anda boleh membuat status remove 函数使用 状态更新器功能，可以访问最新的状态值。这允许您在组件在 remove() 中重新渲染之前访问新的 list anda.

Nota: Anda sedang menukar keadaan asal dengan menukar isMounted 属性设置为 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: