JSON атрибуты из API POST видимы, но недоступны с помощью axios - PullRequest
0 голосов
/ 30 апреля 2020

Я отправляю запрос POST в конечную точку, которая обслуживает мою целевую страницу, используя axios:

const json = await axios.post('/', {withCredentials: true});

Это, кажется, работает нормально, когда я проверяю, что возвращается с console.log. Эти команды отладки

console.log(json.status)
console.log(json.data)

производят вывод в моем терминале браузера:

200
> Landing.js:42 {email: "me@example.ventures", name: "Aaron", profile_pic: "https://my_pic_url.photo.jpg"}

Все это кажется довольно простым, так что мой мозг тает, что я не могу получить доступ к свойствам json.data как я и ожидал. Например, с console.log(json.data.email) я получаю:

> Landing.js:42 Uncaught TypeError: Cannot read property 'email' of undefined
    at Landing (Landing.js:42)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:141)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Еще более запутанно, я могу позвонить console.log(JSON.stringify(json.data));, чтобы получить:

'{"email": "me@example.ventures", name: "Aaron", "profile_pic": "https://my_pic_url.photo.jpg"}'

console.log(Object.keys(json)) отпечатков

> (6) ["data", "status", "statusText", "headers", "config", "request"]

, но странно, console.log(Object.keys(json.data)) также выдает ошибку:

Landing.js:42 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Landing (Landing.js:42)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:141)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Обратите внимание, что я использую useState хуки внутри функции для хранения и доступа к данным из моих вызовов API. Возможно, это как-то связано с этим?

Кажется, это очень решаемая проблема, но я зависал в течение часа или около того. Любая помощь будет очень признательна.

** ОБНОВЛЕНИЕ *

Еще одна точка данных. При вызове

const json_string = JSON.stringify(json.data);
console.log(JSON.parse(json_string))

выдается ошибка:

> VM855:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at Landing (Landing.js:43)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)

Снимок экрана из браузера для console.log(json.data) и console.log(typeof json.data): enter image description here

По просьбам других пользователей стека, вот несколько скриншотов от моего сетевого инспектора. Ответ выглядит великолепно для меня ...:

enter image description here

и

enter image description here

...