Как изменить переменную в useEffect?

Question

[lena_tihonova_bl]

Только начинаю изучать React, поэтому вопрос, наверное, очень глупый и очевидный, но тем не менее нормально сформулировать проблему и найти её решение в интернете никак не получается.
Есть переменная, представляющая собой массив с n-нным количеством элементов (сперва – с нулём):

function App() {
  const elements = [];
}

export default App;

Потом я добавляю туда несколько элементов в useEffect:

for (let i = 0; i < data.data.length; i++) {
            elements.push(<Uploaded_file button_name={data.data[i]} key={i}></Uploaded_file>)
            ...
}

Однако после загрузки страницы массив так и остаётся пустым. А если заполнить его чем-то в самом начале, то именно оно и выведется. Как можно решить эту проблему? Объясните, пожалуйста!

P.S. Пытавшись кое-как нагуглить решение, я могу предположить, что проблема с рендером, но как его применить – не понятно, ибо при попытке это сделать страница вовсе не прогружается.

Answer 1

[Lapita12]

Проблема возникает из-за того, что когда вы изменяете массив elements, это не вызывает перерисовку компонента.
Чтобы изменять переменную в useEffect, вы можете использовать локальный state. Для этого можно использовать хук useState

import React, { useState, useEffect } from 'react';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    // вместо data.data используйте свой набор данных
    const data = { data: ['file1', 'file2', 'file3'] };
    const newElements = [];
    for (let i = 0; i < data.data.length; i++) {
      newElements.push(<Uploaded_file button_name={data.data[i]} key={i}></Uploaded_file>);
    }
    setElements(newElements);
  }, []);

  return (
    <div>
      {elements}
    </div>
  );
}

export default App;

Comments

[lena_tihonova_bl]

Странно: вроде получилось, но при загрузке страницы элементы появляются буквально на полсекунды, а потом буквально всё исчезает, – это будет, если вызывать setElements(newElements) сразу после for'а. А если спуститься на тот же уровень вложенности, где создавался массив newElements, пишется следующее: Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

[lena_tihonova_bl]

То есть если будет что-то вроде этого:

const newElements = [123];
setElements(newElements);

[Lapita12]

lena_tihonova_bl,
Проблема в том, что вы вызываете setElements внутри useEffect, который запускается при каждом рендере компонента. Вы запускаете цикл, который собирает массив newElements, а затем сразу вызываете setElements и передаете ему это массив. В результате компонент рендерит эти элементы до того, как newElements заполнен. И когда newElements заполнен, вы вызываете setElements, которое снова вызывает перерендеринг компонента, и так происходит бесконечно, что вызывает ошибку.

Чтобы исправить эту проблему, вы можете вынести создание массива newElements из useEffect, а затем передавать его в setElements. Таким образом, setElements будет вызываться только один раз при загрузке компонента.

import React, { useState, useEffect } from 'react'; 

function App() {
  const [elements, setElements] = useState([]);

  const data = { data: ['file1', 'file2', 'file3'] };
  const newElements = [];

  useEffect(() => {
    for (let i = 0; i < data.data.length; i++) {
      newElements.push(<Uploaded_file button_name={data.data[i]} key={i}></Uploaded_file>);
    }
    setElements(newElements);
  }, []);

  return (
    <div>
      {elements}
    </div>
  );
}

export default App;

Обратите внимание, что я переместил объявление data и newElements за пределы useEffect. Также я передаю [] в качестве зависимостей для useEffect, чтобы он запустился только один раз при загрузке страницы.

[lena_tihonova_bl]

Lapita12, большое спасибо! Вся проблема была в том, что я забыл вставить пустой массив в useEffect.

Answer 2

[Владимир]

Для начала изучения, просто последовательно прочитайте родную документацию на английском языке
https://reactjs.org/tutorial/tutorial.html
https://reactjs.org/docs/getting-started.html
Там есть и про стейт и про ефекти
useSate, useEffect