• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z wyciekiem danych [React]

Object Storage Arubacloud
0 głosów
167 wizyt
pytanie zadane 3 września 2019 w JavaScript przez Sobol3k Użytkownik (690 p.)
zmienione kategorie 3 września 2019 przez Sobol3k

Mam pytanie otóż napisałem aplikacje w React tylko mam mały problem z eventem resize, skutkuje to wyciekiem danych ze state innego komponentu nie wiem dlaczego tak się dzieje, ale mam nadzieje że wy mi pomożecie. Otóż wygląd mojej stopki na stronie www zależy od wartości window.innerWidth - jak dobrze wiemy zmienia się ona wraz ze zmniejszaniem/zwiększaniem okna przeglądarki. Komponent Footer jest komponentem funkcyjnym zatem użyłem useEffect do wywołania eventu resize oraz useState bo przetrzymywania aktualnej wartości szerokości okna. W momencie kiedy użytkownik zmniejszy lub zwiększy okno następuje wyciek pamięci ze state innego komponentu - dziwne ale tak się dzieje. Może ktoś rzucić okiem na kod i powiedzieć co jest nie tak.

import React, {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import './css/Footer.css';

const Footer = (props) => {
  const [resolution, setResolution] = useState(null);
  useEffect(() => {
    window.onresize = () => {
      setResolution(window.innerWidth);
    }
  })
  return(
    <footer>
      {resolution > 1050 ?
        <ul className="social-media">
          <li>
            <Link to="#" className="social-media-item facebook">
              <i className="fab fa-facebook-f"></i>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </Link>
          </li>
          <li>
            <Link to="#" className="social-media-item google-plus">
              <i className="fab fa-google-plus-g"></i>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </Link>
          </li>
          <li>
            <Link to="#" className="social-media-item instagram">
              <i className="fab fa-instagram"></i>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </Link>
          </li>
          <li>
            <Link to="#" className="social-media-item linkedin">
              <i className="fab fa-linkedin-in"></i>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </Link>
          </li>
          <li>
            <Link to="#" className="social-media-item youtube">
              <i className="fab fa-youtube"></i>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </Link>
          </li>
        </ul> 
          : <div className="footer-for-small-devices">
              <div className="flexible-element">
                <div className="col-1 col">
                  <h3 className="header-for-small-devices">Dla Kogo</h3>
                    <ul className="menu-for-small-devices">
                      <li className="menu-for-small-devices-element">Organizacje i Uczelnie</li>
                      <li className="menu-for-small-devices-element">Najemcy Poszukujący</li>
                      <li className="menu-for-small-devices-element">Właściciele i Zarządcy</li>
                    </ul>
                </div>
                <div className="col-2 col">
                  <h3 className="header-for-small-devices">Nieurchomości</h3>
                    <ul className="menu-for-small-devices">
                      <li className="menu-for-small-devices-element">Klasy A</li>
                      <li className="menu-for-small-devices-element">Klasy B</li>
                      <li className="menu-for-small-devices-element">Klasy C</li>
                    </ul>
                </div>
                <div className="col-3 col">
                  <h3 className="header-for-small-devices">Pomoc</h3>
                    <ul className="menu-for-small-devices">
                      <li className="menu-for-small-devices-element">Faq</li>
                      <li className="menu-for-small-devices-element">Kontakt</li>
                      <li className="menu-for-small-devices-element">O REDD</li>
                    </ul>
                </div>
              </div>
              <div className="connect-with-us">
                <div className="line-1 line"></div>
                <h3 className="header-connect-with-us">Dołącz <span>do</span> NAS</h3>
                <div className="line-2 line"></div>
                <div className="social-media-for-small-devices">
                  <ul className="social-media-for-small-devices-menu">
                    <li><span className="fab fa-linkedin"></span></li>
                    <li><span className="fab fa-facebook-square"></span></li>
                    <li><span className="fab fa-google-plus-square"></span></li>
                    <li><span className="fab fa-twitter-square"></span></li>
                  </ul>
                </div>
                <div className="line-3 line"></div>
              </div>
            </div>}
    </footer>
  );
}

export default Footer;

 

2
komentarz 3 września 2019 przez Tomek Sochacki Ekspert (227,510 p.)
zanim przejdziemy do analizy, to powiedz mi dlaczego nie zrobisz tego po prostu w CSS na odpowiednich regułach @media? Nie widzę tutaj żadnego uzasadnienia dla analizy wymiarów okna z poziomu JS.
komentarz 3 września 2019 przez Sobol3k Użytkownik (690 p.)
Ponieważ od strony media queries nie dostałbym takiego efektu jakiego oczekuję to znaczy nie miałbym możliwości dodania nowych elementów html lub całkowitej zmiany ich struktury.
komentarz 3 września 2019 przez xmentor Nałogowiec (49,520 p.)
Ale masz możliwość ukrywania konkretnych elementów dzięki CSS - bedzie na pewno wydajniej, niż usuwanie/dodawanie elementów do DOM;)

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 124 wizyt
pytanie zadane 10 marca 2022 w JavaScript przez warzywko13 Użytkownik (840 p.)
0 głosów
1 odpowiedź 111 wizyt
pytanie zadane 31 sierpnia 2020 w JavaScript przez Bish0p Obywatel (1,940 p.)
0 głosów
1 odpowiedź 119 wizyt
pytanie zadane 20 września 2019 w JavaScript przez DawidK Nałogowiec (37,910 p.)

92,654 zapytań

141,543 odpowiedzi

319,958 komentarzy

62,023 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...