Hur använder man ett fetch promise in react.js

Permalänk

Hur använder man ett fetch promise in react.js

I mitt API där jag skickar data till servern hämtar jag även ett id som returneras i ett promise.
Hur kan jag sedan använda mig av detta id i react.js?
Jag får fram värdet i min console.log(data) men jag vill att idAdv får detta värde

fetch('http://localhost/reusesport/src/api/newadvertisment.php', { method: 'POST', body: JSON.stringify(data) }) .then(resp => resp.text()) .then(data => console.log(data)) .then(data => { this.setState({idAdv: data}); }) console.log(this.state.idAdv);

Den sista console.logen ger ingenting.

Permalänk
Medlem
Skrivet av Snillet71:

I mitt API där jag skickar data till servern hämtar jag även ett id som returneras i ett promise.
Hur kan jag sedan använda mig av detta id i react.js?
Jag får fram värdet i min console.log(data) men jag vill att idAdv får detta värde

fetch('http://localhost/reusesport/src/api/newadvertisment.php', { method: 'POST', body: JSON.stringify(data) }) .then(resp => resp.text()) .then(data => console.log(data)) .then(data => { this.setState({idAdv: data}); }) console.log(this.state.idAdv);

Den sista console.logen ger ingenting.

Svårt att felsöka om man inte sitter med det själv och ser hur allt hänger ihop, men eftersom du säger att du får ut korrekt data i console.log så bör väl allt fungera som det ska.

Tror eventuellt att problemet blir att du kör .then(data => ...) två gånger, istället för console.log så får du i den .then sätta state.
setState sker också async, så din console.log kommer troligtvis att vara undefined för setState inte hunnit köras klart innan loggen sker.

Lösningen på det är att göra det du ska i lifecyclemetoden
componentDidUpdate(prevProps, prevState)
där du kan jämföra prevState med this.state för att se att du har fått in korrekt data. Denna bör du också använda tillsammans med shouldComponentUpdate(nextProps, nextState) som returnar en bool, för att undvika onödiga renderingar.

Alternativt är att passa in en callback i this.setState, vilket är okej i vissa fall.

.then(data => { this.setState({idAdv: data}); }, () => console.log(this.state.idAdv));

Personligen föredrar jag att jobba med async/await istället för att chaina .then(). Gör det lättare att läsa

Permalänk
Medlem
Skrivet av Snillet71:

I mitt API där jag skickar data till servern hämtar jag även ett id som returneras i ett promise.
Hur kan jag sedan använda mig av detta id i react.js?
Jag får fram värdet i min console.log(data) men jag vill att idAdv får detta värde

fetch('http://localhost/reusesport/src/api/newadvertisment.php', { method: 'POST', body: JSON.stringify(data) }) .then(resp => resp.text()) .then(data => console.log(data)) .then(data => { this.setState({idAdv: data}); }) console.log(this.state.idAdv);

Den sista console.logen ger ingenting.

fetch ger dig en Promise. En Promise representerar en process som pågår i bakgrunden och kommer bli klar "senare". Tänk dig att du beställer mat genom Foodora: du vet att maten inte kommer stå på bordet så fort du placerat din beställning. Men din console.log förutsätter att maten redan står där (mer konkret, att din fetch redan har hänt och att this.setState(…) till följd av detta redan har körts.)

Promise låter dig arbeta med detta framtida värde — Promise heter promise för att det representerar ett löfte om ett framtida värde — genom .then, precis som du gör. Problem #2 i ditt exempel är raden med .then(data => console.log(data)), där du tappar värdet genom att skicka det till console.log: console.log returnerar nämligen inget värde, så på efterföljande rad kommer isAdv att sättas till undefined.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Det är som Teknocide säger. Din loggning kommer ske innan du fått svar och som även påpekats så är setState asynkron, vilket innebär att this.state.idAdv antingen har sitt gamla värde eller är undefined.

Visa signatur

WS: Mac Studio M1 Max | 32 GB | 1TB | Mac OS
WS: Intel i5 12600K | 64 GB DDR4 @3600 Mhz | 2x1TB nvme 2x1TB SSD SATA | Windows 11 & Manjaro Linux
Bärbar: Macbook Pro 14" | M1 Pro | 16GB RAM | 512GB SSD | Mac OS
Servrar: Intel i7 10700K | 64 GB DDR4 @3600Mhz | 3 TB SSD + 22TB HDD | Unraid |
4x Raspberry pi 4b 8Gb | Dietpi |

Permalänk
Medlem

Console.log returnerar ingenting så nästkommande .then har inget invärde. Gör en body till din funktion och sätt state där. Och skippa sista .then
.then(data => {
Console.....
SetState...
})

Skickades från m.sweclockers.com

Visa signatur

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.