[pionierx]

#webdev #js #react
Mireczki mam problem

Mam cos takiego

App render wyglada tak:

...

W PostsList w metodzie componentDidMount pobieram dane z API.
PostsList renderuje rowniez do wyswietlania detali. No i teraz pojawia sie moj problem. Po kliknieciu w navLink jestem przekierowany do odpowiedniej sciezki np. list/3/details, ale komponent nadrzedny czyli PostsList jest odmontowywany (odpala sie componentWillUnmount i montowany ponownie, a wiec request znowu jest wykonywany czego chcialbym uniknac).
Spotkal sie ktos z czyms takim?
React-router-dom w wersji 4.2

[Zergall]

Spotkal sie ktos z czyms takim?

@pionierx: Tak, to normalne zachowanie routera. Najprostszym rozwiązaniem Twojego problemu będzie pobranie danych przez komponent nadrzędny i przekazanie id do PostList, np. poprzez props.

[pionierx]

@Zergall: hmmm to bardzo slabo, w Angularze router tak nie dziala:p przypadek ktory opisalem mozna obsluzyc tak jak mowisz, ale juz wpadlem na inny w ktorym takie dzialanie bedzie bardzo niepozadane. Zalozmy ze mamy widok z contentem ktory jest pobierany i linkami ktorych zawartosc ma wyswietlic sie zaraz pod i musi miec to odzwierciedlenie w url np po to zbey dalo sie udostepniac link. Myslalem ze to bug, a nie

[Zergall]

@pionierx: W tej sytuacji najlepiej będzie, gdy przy pierwszym wyrenderowaniu komponentu wyślesz request i zapiszesz dane do store'a, z którego będziesz pobierać dane przy następnych renderach. React nie ma wbudowanego rozwiązania do obsługi store'ów, dlatego jego działanie może dziwić angularowców ;)

[pionierx]

@Zergall: w jakiej metodzie PostsList powinien nastapic dispatch akcji FetchPosts tak zeby stalo sie to tylko jeden raz, przy pierwszym renderze i bylo odporne na ponowne montowanie komponentu?

[pionierx]

@Zergall: i mysle ze store akurat nie ma nic do rzeczy, problematyczne jest to ze komponent jest montowany ponownie

[pionierx]

@iksdede: mozna tak zrobic, zastanawialo mnie jedynie dlaczego komponent jest odmontowywany. Odkrylem ze tak sie dzieje tylko w przypadku kiedy parent jest HOCem, gdy uzywam zwyklego komponentu wszystko jest ok.

[pionierx]

Jakby ktos mial podobny problem to rozwiazanie jest takie:
zamiast uzywac HOC w roucie w taki sposob ` nalezy wczesniej przypisac sobie zwrocony komponent do zmiennej i podac ta zmienna do component. Czyli w tym przypadku const wrappedComponent = wrapper(component);