[Dominias]

#react #programowanie
Aj nid help łans egen. Nie za bardzo rozumiem dlaczego fetchedFile jest nullowany przy rerenderze - przekazuję te pole jako props do wykorzystywanego "w środku" komponentu i w momencie jak setuję te pole to ten mój komponent wrapper odpala się od zera wraz z wartością fetchedFile ustawioną na null - co ciekawe reszta pól ma przywrócony poprzedni stan czyli np. initialized jest na true. Ktoś podpowie co tu #!$%@?łem?

[nightman]

@Dominias:
getMonitoringData powinien być useCallback'iem, sideEffect powinien być wywołany w useEffect z pustą tablicą deps (aby był wykonany raz) i zwracać funkcję czyszczącą setInterval.

[NuncjuszPapieski]

@Dominias:

any any[] (╯°□°）╯︵ ┻━┻

Nie za bardzo rozumiem, dlaczego do ` przekazujesz całą metodę sideEffect do fetchowania danych, skoro te dane i tak przekazujesz w propsach jako wynik metody getMonitoringData.

Tak jak przedmówca stwierdził, pobierz dane w useEffect z pustym deps array i zrób clearInterval na return`.

BTW Ja bym zrobił z tego custom hooka.

[Dominias]

@NuncjuszPapieski w main component jest element który triggeruje request i ten sideEffect wywołuje się kiedy przychodzi response dla niego. Dlaczego zabijać interval? Te dane muszę pobierać co X czasu

[cppguy]

@Dominias:

Dlaczego zabijać interval? Te dane muszę pobierać co X czasu

trzeba robic tak jak pan jezus powiedzial

https://upmostly.com/tutorials/setinterval-in-react-components-using-hooks

[Dominias]

@nightman: @NuncjuszPapieski: @cppguy: może któryś z was na to spojrzeć? Bo coś ewidentnie #!$%@?łem z tym useCallback.. do tego też nie rozumiem jak w useEffect wrzucić metodę która nie wiem czy będzie wywołana bo to zależy czy user strigeruje tę akcję w MainComponent z returna a z tego co czytam useEffect działa na zasadzie OnInit..

https://pastecode.io/s/pjshtjyy

[nightman]

Wrzuć działającą wersję na CodeSandox (React + Typescript template) i podrzuć linka

[pustko]

@Dominias: Kiedy odpala się onFileUploadEffect? Na pewno tylko wtedy, gdy zostanie wrzucony jakiś plik?

[Dominias]

@nightman: @pustko: tutaj macie uproszczony przykład, na szybko robiłem wiec ten counter bez sensu, chodzi o to ze na kliknięcie buttona odpala sie interwał i powinien wartość podnosić co 5 za każdym razem, a on po prostu bierze init value czyli 0 i dodaje 5, wiec za kazdym razem jest ustawiana wartosc 5. W konsoli mozecie zobaczyc ze iteracja rosnie co 5s prawidlowo: https://stackblitz.com/edit/react-starter-typescript-syez6p?file=Home.tsx

[pustko]

@Dominias: Update stanu powinien wyglądać tak: setValue((prevValue) => prevValue + 5);

[Dominias]

@pustko: no ok w tym przypadku tak, ale w moim głównym przypadku nie updatuje poprzedniej wartości tylko chcę nadpisać obecną więc to nie jest kejs

[Dominias]

Czy w tym ostatnim kroku fetchedFile nie powinno miec wartosci przypisanej?

[Dominias]

@nightman: @pustko: ok udało mi się dobrze ukazać mój problem, spójrzcie na console.log który ma mi zwrócić aktualną wartośc - cały czas zwraca 0. Ten sam problem mam w swojej apce gdzie nie zwraca mi aktualnej wartości tylko null (inicjującą wartość), a chcę mieć do niej dostęp żeby porównać stary i nowy result.

[Dominias]

Dobra, ogarnąłem to w ten sposób

[Dominias]

Tylko musze jeszcze ogarnąc zabijanie interwału, co odpowiada tutaj onDestroy?

[pustko]

@Dominias: Możesz wykorzystać useRef i ten przykład z dokumentacji: https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

[pustko]

@Dominias: Btw. useRef możesz tez wykorzystać do trzymania wartości zmiennej initialize, żeby zachowac ja pomiędzy renderami. Jak wrócę do domu to przyjrzę się dokładniej Twojemu przykładowi i problemowi

[NuncjuszPapieski]

@Dominias: a może wytłumacz co Ty tu chcesz osiągnąć? Bo nie za bardzo rozumiem, ale widzę ze na na początku po wyrenderowaniu komponentu chcesz odpalić funkcje, która na intervalu pobiera dane. I chcesz tez aby user po kliknięciu na jakiś element odpalił te sama funkcje, czyli ponownie odpalił interval z pobieraniem danych?

Nie wiem czy dobrze zrozumiałem.