React UseEffect - утечка памяти l oop запросов - PullRequest
Новая
       49

React UseEffect - утечка памяти l oop запросов

1 голос
/ 27 мая 2020

Это моя проблема с кодом, я объясняю случай шаг за шагом

Я запускаю код в useEffect в первый раз 

  const [data, setData] = useState([]);

  useEffect(() => {

     setData(prev =>
       prev.concat([
         {
           day: home.matchsPlayed,
           [selectedHomeName]: home.totalCal
         }
       ])
     );

   },[home.matchsPlayed, home.totalCal, selectedHomeName]);

console.log('Data Array', data);

Это результат console.log('Data Array', data);

enter image description here

на шаге номер 1 на рисунке (1 массив)

Затем я выбираю другой элемент в раскрывающемся списке, поэтому я отправляю другой запрос (это Promise.all)

В методе selectHomeTeamStat я устанавливаю данные массива пустыми = > setData([]); Шаг пустой массив на картинке 

  const [isStateDirtyHome, setStateDirtyHome] = useState(false);

  const selectHomeTeamStat = evt => {
    const { value } = evt.target;
    const item = items.find(item => item.team_id == value);
    setSelectedHomeOption(value);
    setSelectedHomeName(item.name);
    setData([]);
    setStateDirtyHome(true);
  };

, а также я установил setStateDirtyHome(true); для запуска другого useEffect, где я могу отправить запрос на пополнение массива с помощью в новом элементе указано Шаг номер 2 на картинке (2 массива) Пока все хорошо. 

  useEffect(() => {
    if(isStateDirtyHome) {
      getStats(leagueId, selectedHomeOption, 'home');
      debugger
    }
  },[selectedHomeName, selectedHomeOption, home.matchsPlayed, home.totalCal]);

Проблема в том, что теперь запускаются все oop того же запроса

Здесь вывод

enter image description here

Как я могу избежать этого и иметь только мой новый массив данных с 3 объектами, как в Шаг номер 2 на картинке ( 2 Массив) ? Есть ли лучший способ сделать это?

...