Lekcja numer 5 - moment pobierania danych

[michalprzydatek]

Mam problem w ktorym momencie pobierac dane, poniewaz komponent z przyciskami od razu potrzebuje danych poniewaz znajduje sie w render() i wyslane dane sa puste. Dopiero po chwili zdaze pobrac dane z api. Jak opoznic wyslanie danych do tego komponentu zeby dane nie zostaly od razu pobierane przez komponent z przyciskami, tylko dopiero po pobraniu przez fetch?

2) czy mozna stworzyc jedna funkcje fo pobrania danych a pozniej na tych danych operowac? W jaki sposob?

3) czy pobrane dane powinnismy wklejac do state? I w kazdej funkcji do niej sie odwolywac? Pobieram dane, ale ciezko mi wyrenderowac odpowiednia skladnie html.

Przydalo by sie omowienie na zajeciach jak pobierac dane jak je modelowac itd...

[michalwiacek]

Przyciski ustawiasz na sztywno. Czyli po prostu tablica stringów. Można to wywnioskować np. po tym, że nie ma takiej rakiety jak Falcon 10. Domyślnie pobierasz to, co jest pod przyciskiem All rockets, czyli wołasz funckję fetchującą, bez przekazania argumentu, w ComponentDidMount(). Przy kliknięciu przycisku też wołasz funkcję fetchującą ale już z argumentem, który odpowiednio preparujesz i dodajesz do zapytania. Mam nadzieję, że trochę rozjaśniłem.

[michalwiacek]

@michalprzydatek rzuć okiem na moj program

[michalprzydatek]

Już na to wpadłem, tylko mam jeden problem, po użyciu w konstruktorze this.handleFilterChange = this.handleFilterChange.bind(this); mam pętlę pobierania danych :) Nie użyłem axiosa, tylko fetch`a

`

availableRocketList(value) { const {rocketNameFilter } = this.state; let filter = ?rocket_name=${value}; if(!value) filter = '';

fetch(`https://api.spacexdata.com/v2/launches${filter}`)  
  .then((response) => response.json())
  .then((response) => {
    this.setState({ launches: response, isLoading: false });
    console.log('availableRocketList',response.length);
})
.catch((error) => {
  console.error(error);
});  

}

`

[michalwiacek]

wrzucisz cały plik?

[michalprzydatek]

https://github.com/michalprzydatek/daftcode-react-starter/blob/spacex/src/view/LaunchesList.js akurat w tym pliku wykomentowalem to wywołanie this.handleFilterChange = this.handleFilterChange.bind(this);

[michalwiacek]

masz dwie funkcje robiące to samo: availableRocketList(value) get filteredLaunches()

doToDetails() - co to znaczy? nazwy powinny mówić co dzieje się w środku. ta funkcja nie potrzebna.

Powinieneś usunać wszystkie funckje component* i zostawić tylko:

componentDidMount(){
 this.availableRocketList();
}

Podkreślę tylko, że ja się nie znam, chętnie poczytam zdanie kogoś doświadczonego.

[michalprzydatek]

Miałem mały błąd, już działa. @michalwiacek jak informujesz widok szczegółów, żeby wyświetliło dane o konkretnej rakiecie ? Widzę w App.js zaciąganie Json`ów, czy nie powinniśmy z tego zrezygnować i prezentować dane pobrane?

[michalwiacek]

@michalprzydatek sam mam z tym trochę kłopot, mianowicie, przy kliknięciu w konkretny lot z listy wywołuję metodę, która pobiera dane o locie (przekazując flight_number). Bazując na pobranych danych dociągam jeszcze dane o konkretnej rakiecie. Niestety, mam jakiś błąd w logice. Został mi też problem z widokami.