Cześć
Piszę stronę renderującą tabelkę z danymi. Wykorzystuję Reacta.
Wszystko było dobrze do chwili kiedy zorientowałem się że filtrowanie tabeli zmienia jej zawartość, ale numer aktualnej strony tabeli idzie swoją drogą. W konsekwencji są potworki typu : " Znaleziono 46 obiektów na 10 stronach. Aktualna strona ma numer 13."
W tej chwili ogólny schemat jest taki:
...
importy....
...
class App extends React.Component {
constructor(props) {
super(props);
this.state={x:X,.....,z:Z}
}
....teraz idą handlery....
render{
dane= new Data(this.state.x)// w tym miejscu tworze instancję zdefiniowanej osobno klasy, z wieloma metodami, a pobiera ona dane ze stanu
... dalej wykonuję różne operacje wykorzystując powyżej utworzony obiekt.
...jeszcze dalej mam return gdzie wszystko powinno się pokazać
}
Rzecz w tym, że numer aktualnej strony jest ustawiany w stanie przez handlery, później ten fragment stanu przechodzi do render żeby render wiedziało od którego do którego miejsca wyświetlać. Nic nadzwyczajnego. Tyle, że użytkownik ma dostęp do filtracji, sortowania i innych narzędzi, które są metodami instancji dane obiektu Data. W tej sytuacji łatwo może się zdarzyć, że stan będzie żądał wyświetlenia strony, która już nie istnieje, bo tabela w instancji dane została zdecydowanie skrócona.
Ustawić stanu z render nie mogę. I tu pojawia się pytanie. Mam trzy rozwiązania, które jest właściwe(to jest niesprzeczne z dobrą praktyką albo czymkolwiek takim?:
-
Powołuję zmnienną currentPageNumber, całkowicie zewnętrzną - deklaruję ją za importami a przed deklaracją klasy (a wtedy zarówno handlery jak i render mogą na niej działać).
-
Powołuję zmienną wewnętrzną this.currentPageNumber w konstruktorze i działam na niej zarówno przez handlery jak i w render.
-
Oby to nie było idealne rozwiązanie: mógłbym zamiast deklarować coś tam coś tam w stanie odpalić w stanie cały obiekt z metodami i wszystkie operacje wykonywać na tym obiekcie - czyli na stanie, a dopiero na koniec wyprowadzać dane na render. Dla mnie ma to dwa minusy - po pierwsze musiałbym to pisać prawie od początku, po drugie - nie jestem pewien, czy zmiany w obiekcie wymuszałyby renderowanie; prawdopodobnie trza by się jakoś posiłkować forceUpdate albo this.setstate{}
Na ten moment 1 i 2 są jako tako sprawdzone i działają (IMHO 2 wydaje mi się nienajgorszym pomysłem) ale chciałbym zapytać o zdanie specjalistów. Może jest jeszcze inne rozwiązanie (tzn na pewno jest niejedno). To nie jest zadanie na zaliczenie, ale zupełnie poważnie zapytam - gdybyście zadali komuś takie zadanie, jakie rozwiązanie by Was usatysfakcjonowało? Na moim etapie odpada REDUX/MOBX - przynajmniej na razie.
I takie zupełnie pomijalne pytanie na boku - macie tabele, w wyniku filtracji wypadają wszystkie dane z widocznej strony, gdzie taka tabela powinna się otworzyć w nowym widoku?