Cześć
Piszę w ramach nauki własnej apkę do pobierania danych z Google Books. W ramach tejże apki jest funkcja wczytująca dane
handleSubmitButtonClick=(path)=> {
var startIndex =0;
var results=[];
const searchBooks = ()=>{
const fullPath =path+startIndex.toString(); // aktualizuje scieżkę
fetch (fullPath)
.then(resp => {
if (resp.ok) {
return resp.json()
} else {
return Promise.reject(resp)
}
})
.then(resp => {
if (resp.items) // sprawdza czy pobrały się dane czy już koniec czyli pusta tablica
{
startIndex=startIndex+40;
results= results.concat(resp.items);
searchBooks(startIndex);
}
else{// pobrała się pusta tablica toteż nie ma więcej danych( google books nie udostępnia wiarygodnej informacji o ilości rekordów) I w tym miejscu zaczyna się mój problem. Ogólnie dalej jest trochę bałaganu, siedze nad tym od rana i poniewierają się tu resztki różnych koncepcji
this.setState({numberOfResults:results.length, dane:results}, ()=>{ if (results.length==0) {this.handleBooksNotFound()}else{this.handleBooksFound(results.length)}});
//this.setState({dane:results});
this.setState((state, result) => ({
numberOfResults: results.length
}));
console.log (results);//pokazuje takie dane jakich się spodziewałem.
//if (results.length==0){this.handleBooksNotFound()}else{this.handleBooksFound(results.length)}
};
})
.catch(error => {
if (error.status === 404) {
console.log("Błąd: żądany adres nie istnieje");
}
});
};
const x=searchBooks();
Treść jest taka jaka jest, gdyż GoogleBooks wymusza paginację (max 40 książek ) toteż muszę manewrować indeksem żeby pobierać za kazdym razem od nowego miejsca. Stąd też rekurencja która wydała mi sie w miarę logiczna w tej sytuacji.
Problem polega na tym, że nie bardzo wiem jak te dane 'utrwalić' poza pętlą.
Kod w tej postaci w jakiej widzicie teoretycznie ustawia w stanie dwie wartości: numberOfResults:results.length, dane:results
Problem polega na to, że ustawia je 'na niby'
Poniżej fragment render. Dowcip polega na tym, że o ile mogę wypisać do konsoli -zapisem jak niżej dane i number i dostaję prawidłowe wyniki, to absolutnie nie mam możliwości przekształcenia tego w jakikolwiek sposób. Np. dane pokazują się jako tablica o 300 elementach ale instrukcja dane.length wywołuje komunikat 'dane są null' tak samo jest próbą dostania się do konkretnego elementu.
Podobnie ma się sprawa z długością - rzecz w tym, że console.log pokazuje poprawną wartość, ale już próba wywołania jej w funkcji zwraca błąd kompilacji number is null.
const number =this.state.numberOfResults;
console.log('number' number );
console.log(this.state);
dane = this.state.dane;
console.log (dane);
console.log(CreatePositiveResultMsg(number));
Gdzie jest błąd i jak go naprawić? W przeszłości kilka razy zapisałem tak, ale to były proste przykłady, w tym nie bardzo ma to zastosowanie.
componentDidMount() {
fetch(this.props.source)
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(json => this.setState({
staff: json.map(obj => Object.values(obj)),
}));
}
JavaScript 