Почему useEffect не показывает элементы из массива?

Question

Есть массив данных. Каждому повесил ref, чтобы потом перебрать все элементы. Но в useEffect ничего не консолится. Элементы я получаю только когда страница будет готова и я сделаю какое нибудь изменение на странице, тогда консолится.StrictMode убран. Почему так и как фиксить?

Рабочий пример, с таким же подходом

const array = [
  {
    title: "Ref Element 1"
  },
  {
    title: "Ref Element 2"
  },
  {
    title: "Ref Element 3"
  }
];

const revealRefs = useRef([]);
revealRefs.current = [];

useEffect(() => {
  revealRefs.current.forEach((element) => {
    console.log(element);
  })
}, []);

const addToRefs = (element) => {
  if (element && !revealRefs.current.includes(element)) {
    revealRefs.current.push(element);
  }
}

<section className="container">
   {array.map((element) => (
     <div className="element" ref={addToRefs}>{element.title}</div>    
    ))}  
</section>

Answer 1

Я кстати запустил ваш код и в консоли всё печатается и на странице всё отображается сразу без всяких манипуляций. Если я что-то не так понял, то скопируйте мой код нажав на "Править" и вставьте себе в вопрос и измените его как вам нужно и убедитесь что всё происходит точно так как вы ожидаете

const {useRef, useEffect} = React;

const App = () => {
  const array = [{
      title: "Ref Element 1"
    },
    {
      title: "Ref Element 2"
    },
    {
      title: "Ref Element 3"
    }
  ];

  const revealRefs = useRef([]);
  revealRefs.current = [];

  useEffect(() => {
    revealRefs.current.forEach((element) => {
      console.log(element);
    })
  }, []);

  const addToRefs = (element) => {
    if (element && !revealRefs.current.includes(element)) {
      revealRefs.current.push(element);
    }
  }

  return (
    <section className="container">
       {array.map((element) => (
         <div className="element" ref={addToRefs}>{element.title}</div>    
        ))}  
    </section>
  )
}

ReactDOM.render(<App /> , document.querySelector('#root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

Почему useEffect не показывает элементы из массива?

Ответы (1 шт):