Komunikacja z API w React.js

[type-of-web-komentarze[bot]]

Komunikacja z API w React.js

Bardzo często powracającym wątkiem jest pytanie o to, w jaki sposób zaimplementować komunikację z API w React.js. Moja odpowiedź może Cię nieco zaskoczyć: React nie ma nic do tego. Możesz to robić absolutnie dowolnie.

https://typeofweb.com/komunikacja-z-api-w-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michal Jaracz		2018-03-07 01:10

Mam problem z zapisaniem danych w state po pobraniu fetch'em, możliwe, że dane w ogóle się nie pobierają z zewnętrznego API

Zamieszczam kod, jakieś pomysły? :)

https://github.com/mjaracz/ReactFetch

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-07 07:29

Ten kod w ogóle nie działa na Codepenie, na pewno wszystko poprawnie ustawiłeś?
Patrząc na szybko to po prostu masz literówkę — json.resulte zamiast json.results.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michal Jaracz		2018-03-07 13:35

nie działa na codepenie, ponieważ skopiowałem każdy komponent do jednego skryptu. każdy komponent taki jak

był zapisany w osobnym pliku i imporotwany do app.js, zrobiłem tak bo nie chciało mi sie kopiować każdgo komponentu do osobnego codepena

za chwile psrawdze to literowke

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michal Jaracz		2018-03-08 10:51

Cześć Michał!
Przesłałem na githuba, teraz widać dobrze cała strukturę, masz jakiś pomysł czemu, items zwraca null

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-08 11:00

Na początku sam ustawiasz null: https://github.com/mjaracz/ReactFetch/blob/master/src/App.js#L10-L12

A tutaj nadal brakuje .results. Powinno być json.results. https://github.com/mjaracz/ReactFetch/blob/master/src/App.js#L18

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz		2019-01-04 11:27

Witam, trafiłem tutaj na "schody". Wszystko działa ładnie, ale gdy próbuję dać do fetch'a zamiast adresu do generowania jsona dać swojego z dysku wyskakuje mi:

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

Próbowałem różnych jsonów, nawet pobrałem jeden z wygenerowanych jsonów, i ciągle to samo. Czy importowanie z dysku się czymś różni ? Pozdrawiam

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz		2019-09-19 17:54

EDIT: Poradziłem sobie, rozwiązanie było banalne (o ile dobre) usunąłem całkiem fetcha z componentDidMount i po prostu dodałem this.setState i przypisałem zaimportowany JSON. działa :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2019-01-04 11:27

Cześć,

Mam takie pytanie, ponieważ szukam po różnych forach i nie mogę znaleźć działającej odpowiedzi.
W jaki sposób można wywołać funkcję w stylu onInit lub $(document).ready w React?
Chodzi o sytuację, gdzie w ComponentDidMount używam fetch aby pobrać dane z api i wyświetlić je na stronie i potem automatycznie zaraz po ich załadowaniu wykonać akcję np. zablokowania/odblokowania buttonów na podstawie danych z poszczególnych pól wyświetlanych na ekranie.
W każdy jeden sposób w jaki próbuję to zrobić najpierw wywoływana jest funkcja a dopiero potem dane są renderowane na stronie, więc wszystkie argumenty jakie są brane pod uwagę w tym czasie są jeszcze nullem.

przykład funkcji:
componentDidMount(){
fetch(....); // tutaj działa wszystko poprawnie
prepareButtons();
}

prepareButtons(){
if(this.state.myObject.name == null){
alert(this.state.myObject.name); // tutaj dla sprawdzenia jaka wartośc wchodzi w sprawdzenie ifa -> zawsze pokazuje null
document.getElementById("changeNameButton").setAttribute("disabled", "true");
}
}

W sytuacji kiedy nawet wartość nie jest nullem (co widać w konsoli i na stronie po załadowaniu) funkcja widzi ją jako null ponieważ zawsze wykonuje się ona zanim wszystkie pola zostaną uzupełnione.

Dziękuję
Pozdrawiam

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Po wykonaniu fetcha, wewnątrz funkcji then, powinieneś użyć this.setState, tak jak to opisałem w tym artykule :)

Nie powinieneś używać żadnego document.getElementById, bo Twoje zmiany i tak zostaną nadpisane przez Reacta przy najbliższym renderze.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	obserwujewnioskuje		2019-01-04 11:27

Cześć Michał.
Można ten guzik zrobić w ten sposób?
Odśwież

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

W tym przypadku może to zadziała, ale czy to brzmi sensownie? componentDidMount wywołuje się gdy komponent jest montowany.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-02-15 21:44

Hej, mam problem z zastosowaniem powyższego przykładu w mojej aplikacji. Otóż moje API zwraca mi taki obiekt:
{
"NumberOfPln": 366814918.794,
"NumberOfBtc": 1900.00208,
"NumberOfBcc": 109.17164,
"NumberOfEth": 0,
"NumberOfLtc": 0.41808
}
Jest to API udostępnione przez localhost, taki wynik otrzymuję po wpisaniu zapytania (http://localhost:9000/api/transactions/account?id=1) typu get w Postman.

Piszę więc w React:
class App extends Component {
state = {
status: []
};
componentDidMount = () => {
fetch("http://localhost:9000/api/transactions/account?id=1")
.then(res => res.json())
.then(json => this.setState({
status: json.results
}));
}
render() {
console.log(this.state.status);
return(

{this.state.status}

)
}
}
export default App;

Otrzymuję w console log undefined.... Co robię źle? I jak tutaj "wyciągnąć potem pojedyncze wartości, czy wystarczy np. status.NumberOfPln?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-15 21:58

A skąd json.results? Nie powinno być samo json?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-02-16 14:12

Wielkie dzięki Michał. Sama siedziałam nad tym cały wieczór i nie widziałam!

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-17 23:30

Polecam się!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kopek		2019-06-21 12:39

Mógłbyś wstawić gdzieś przykład z tym ćwiczeniem eventemitter?

Pozdrawiam ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kopek		2019-06-21 16:06

Możesz gdzieś wstawić przykład ćwiczenia z eventemitter?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Lukasz		2021-05-10 00:08

Mam problem bo w komponencie ContactList próbuję dodać filtrowanie. Dlatego ustawiam w jego state pole filteredList które inicjuję w konstruktorze w ten sposób

constructor() {
	super();
	this.state = {
  		filteredList: this.props.contacts
	};
}

Jednak wywala mi to wyjątek

TypeError: Cannot read property 'contacts' of undefined

Ten komponent buduję w App (który odpowiedzialny jest za fetchowanie kontaktów) w ten sposób:

{this.state.contacts ? 
			 
			: "Ładowanie" }

Co robię nie tak? W Twoim repo widzę że nie korzystasz z filteredList tylko bezpośrednio renderujesz listę z this.props.contacts (ja natomiast chciałbym zamiast tego użyć filteredList ze state ContactList które potem będę mógł filtrować).

 
 

Komentarz zaimportowany z WordPressa