Как получить количество отображаемых дочерних элементов с помощью Observer API в react?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Как получить количество отображаемых дочерних элементов ul при отображении элемента во время функции map и при добавлении элементов с помощью mutation observer? , Я связываю изолированную среду кода, пожалуйста, проверьте код перед нажатием add добавление вызывает зависание браузера, в данном конкретном случае я хочу консольный журнал 4другими словами, я не хочу отслеживать, как расширяется список и сколько элементов в него попадает, когда приложение отображается в единственном числе. проблема в том, что observer, похоже, по какой-то причине не запускается, и если это так, то страница зависает. Пожалуйста, проверьте код перед включением функции observable, это может привести к сбою вашего браузера. смысл здесь в том, чтобы получить количество растущих элементов в режиме реального времени, а не после полного отображения списка из-за некоторой логики, которая должна быть реализована в определенное время, а не после завершения отображения списка.

при первом рендеринге добавлен журнал 1 добавлен журнал 2 добавлен журнал 3 добавлен журнал 4

после добавления элемента в журнал добавлено 5 и выше

 const onListMutation = useCallback(
    (mutationList) => {
      console.log(mutationList[0].target , `added${mutationList[0].target}`);
      setCount(mutationList[0].target.children.length);
    },
    [setCount]
  ); 

Пример Codesandbox