0

Есть массив данных. Каждому повесил 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>
4
  • А в deps useEffect'а, пытались добавить revealRefs.current? Commented 31 дек. 2022 в 11:15
  • Что вы вообще хотите сделать? Зачем для простого отображения вы ипользуете useRef? В доках кстати сказано, что изменение .current не вызывает ререндер (почитайте последний абзац)
    – EzioMercer
    Commented 31 дек. 2022 в 14:21
  • @EzioMercer Да у меня салйдер, где 17 изображений, текст и тд. Поэтому такие манипуляции делаю
    – Alexsander
    Commented 31 дек. 2022 в 19:10
  • Вы читали мой ответ? Если да, то внесите пожалуйста соответствующие правки в вопрос
    – EzioMercer
    Commented 31 дек. 2022 в 19:44

1 ответ 1

0

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

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.