Ну, это должны быть три отдельные темы, но я просто хочу подытожить то, что я сегодня узнал.

Неглубокое копирование

мелкая копия копирует только один слой исходного массива, то, что я имею в виду под одним слоем, выглядит так:

const oriArr = ["1","2","3"];
const copyArr = oriArr.slice(); //shallow copy whole arr
copyArr.push("4");
console.log(oriArr); // "1","2","3"
console.log(copyArr); // "1","2","3","4"

Из простого примера можно сделать вывод, что мелкое копирование можно использовать как быстрое копирование массива без изменения исходного значения массива.

Однако, если это многомерные массивы, жизнь будет сложнее:

//I want to push 2 to the 0 element
const oriArr = [["1"],["2"],["3"]];
const copyArr = oriArr.slice(); //shallow copy whole arr
copyArr[0].push("4");
console.log(oriArr); // ["1","4"],["2"],["3"]
console.log(copyArr); // ["1","4"],["2"],["3"]

Array.slice() вообще не работает для многомерных массивов!!!

В React я бы не стал иметь дело с простыми массивами значений. Это массивы объектов (как одномерные, так и многомерные). Я использую множество функций отображения для извлечения значений многомерных массивов и размещения их там, где они должны быть (? может быть, в будущем у меня будет больше способов). На самом деле я не решаю здесь проблему, просто поделюсь некоторыми соображениями: преобразовать многомерные массивы в одномерные массивы, а затем реструктурировать их так, как вам нравится.

Реализация опроса JS

История пользователя 1: Как пользователь, я хочу, чтобы мой список изображений обновлялся, когда отображается всплывающее уведомление о завершении создания изображения.

История пользователя 2: Как пользователь, я хочу видеть историю уведомлений, когда я нажимаю кнопку уведомления, чтобы я мог видеть свои уведомления.

Я уже реализовал часть уведомления, используя опрос JS с помощью метода setInterval.

В файле NotificationToast.tsx я использую функцию loadNotification для извлечения всех уведомлений из базы данных и сохранения их в локальной переменной с именем note. Стоит отметить, что уведомление будет удалено после того, как оно будет отображено во внешнем интерфейсе.

// for storing the notifications locally so that the user can see the notification history
let result = new Map<string, any>();
export let note = observable({notifications:result});
// for alert style
let style:string = "";
export let styling = observable({addStyle:style});
function NotificationToast(userId:string, images:any) {
    loadNotification(userId);
    images.injectImageList(userId);
    setInterval(() => {
          loadNotification(userId);
          images.injectImageList(userId);
    },10000)
}
function toastifyNotifications(note:any) {
    toast.success(note.message, { containerId: "B" });
}
function loadNotification(userId:string) {
  const results = somePromisewithUserId;
  if(results) {
    result.then((res:any) => { 
      if(res.data){
         for(const note of res.data.group) {
           toastifyNotification(note);
           note.notifications.set(note); 
           // store locally for checking history
         }
           styling.addStyle="alert";
      }
    }) 
   .catch((error: any) => {
      console.log(error);
    });
  }
}
export default NotificationToast;