ReactJS oraz PUT

Odpowiedz Nowy wątek
2019-08-29 19:00
0

Witam. Tworząc aplikację chciałem zrobić możliwość edycji danego elementu. Niestety ta czynność najwyraźniej przerosła mnie, ponieważ wywołując metodę typu PUT używając funkcji fetch dostaję następujący komunikat.

  PUT http://localhost:8003/be4Sport/api/records/edit/1 400
dispatchXhrRequest @ xhr.js:166
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:49
Promise.then (async)
request @ Axios.js:56
wrap @ bind.js:11
updateRecord @ Record.js:35
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:481
executeDispatch @ react-dom.development.js:614
executeDispatchesInOrder @ react-dom.development.js:636
executeDispatchesAndRelease @ react-dom.development.js:744
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:753
forEachAccumulated @ react-dom.development.js:725
runEventsInBatch @ react-dom.development.js:770
runExtractedPluginEventsInBatch @ react-dom.development.js:916
handleTopLevel @ react-dom.development.js:6171
batchedEventUpdates @ react-dom.development.js:2422
dispatchEventForPluginEventSystem @ react-dom.development.js:6271
dispatchEvent @ react-dom.development.js:6301
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
discreteUpdates$1 @ react-dom.development.js:22935
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
createError.js:17 Uncaught (in promise) Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60

Wykorzystując Postmana wszystko działa poprawnie, ale w momencie gdy chcę przerzucić to wszystko do Reacta wyświetla mi się powyżej przedstawiony komunikat. Wywołanie funkcji wygląda w sposób następujący

const form = new FormData();
        form.append('unit', this.state.newResult)
        fetch('http://localhost:8003/be4Sport/api/records/edit/1', {
            method: 'PUT',
            mode:'no-cors',
            headers: {
                "Content-Type": "application/json; charset=UTF-8"
            },
            body: form
        })

Pozostało 580 znaków

2019-08-29 20:28
1

Użyj do tego axios. Obsługuje dużo więcej od fetch (timeouty, transformatory, interceptory i wiele innych)
Ponadto dostaniesz lepszy komunikat błędu.

Ale z tego co widze to dostajesz 400 Bad Request


edytowany 1x, ostatnio: MasterOf, 2019-08-29 20:33
Axios to nie jest magiczne lekarstwo na wszystko, a każda dodatkowa biblioteka ma swój koszt. - Maciej Cąderek 2019-08-29 22:57

Pozostało 580 znaków

2019-08-29 22:55
0

Pewnie dane przekazywane do APi są złe - co zawiera this.state.newResult w momencie dodawania do FormData? Na pewno masz dobry typ dla body? Błąd 400 wskazuje, że z jest coś nie tak z zawartością wysłanego requesta.

Pozostało 580 znaków

2019-08-29 22:57
0
Maciej Cąderek napisał(a):

Pewnie dane przekazywane do APi są złe - co zawiera this.state.newResult w momencie dodawania do FormData? Na pewno masz dobry typ dla body? Błąd 400 wskazuje, że z jest coś nie tak z zawartością wysłanego requesta.

Zawiera zmienną, która powinna być wysłana. Wykorzystałem tak jak wcześniej wspomniał kolega metodę axios i jakoś to poszło.

Ha, @Maciej Cąderek axios lekarstwem na wszystko! :P - MasterOf 2019-08-29 23:00
Trochę bez sensu - MasterOf 2019-08-29 23:13

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0