Как передать данные формы в GET-запрос API в React - PullRequest
Новая
       29

Как передать данные формы в GET-запрос API в React

0 голосов
/ 05 февраля 2020

Итак, мой бэкэнд-разработчик дал мне конечную точку для проверки prefill данных формы.

Так что это GET запрос http://localhost:3000/v0/in_progress_forms/MDOT

, и я передаю пару ключ / значение test:test в POSTMAN

и I получить следующий ответ: 

{
    "form_data": {
        "profileFullName": {
            "first": "Greg",
            "middle": "A",
            "last": "Anderson"
        },
        "gender": "M",
        "profileAddress": {
            "street": "ADDY 3",
            "city": "Detroit",
            "state": "MI",
            "country": "USA",
            "postalCode": "22312"
        },
        "email": "test2@test1.net",
        "dateOfBirth": "1933-04-05"
    },
    "metadata": {
        "version": 0,
        "prefill": true,
        "returnUrl": "/profile-information"
    }
}

Итак, я настраиваю свой запрос API в React: 

export const getUserInformation = formData =>
  apiRequest(`v0/in_progress_forms/MDOT`, {
    method: 'GET', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // no-referrer, *client
    body: JSON.stringify(formData),
  });

Тогда я просто пытаюсь проверить его в своем компоненте реакции 

import React from 'react';
import { getUserInformation } from './api';

class MyComponent extends React.Component {
    componentDidMount() {  
      getUserInformation().then(data => {
        if (data.error) {
          console.log(data.error);
        } else {
          console.log(data);
        }
      });
    }
  
    render() {
      return (
        <div>
          My Component
        </div>
      );
    }
  }
  
  export default MyComponent;

Поэтому, когда я go к консоли, я вижу такой ответ: 

Response {type: "basic", url: "http://localhost:3001/mdt/2346/v0/in_progress_forms/MDOT", redirected: false, status: 200, ok: true, …}
type: "basic"
url: "http://localhost:3001/mdt/2346/v0/in_progress_forms/MDOT"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers
__proto__: Headers
body: (...)
bodyUsed: false
__proto__: Response

Но я не получаю данные, которые были получены от POSTMAN Как мне структурировать их, чтобы увидеть данные.

Ответы [ 2 ]

0 голосов
/ 05 февраля 2020

Я не знаю, что вы используете для отправки запроса, но если вы используете API выборки, вам нужно сначала проанализировать данные, используя json(), что является еще одним обещанием, а затем использовать его в качестве данных 

getUserInformation().then((response) => {
    response.json().then((data) => {
        console.log(data);
    });
});

FYI, ax ios - это популярная клиентская библиотека HTTP на основе обещаний для браузера и node.js, которая уже автоматически преобразует данные запросов и ответов для вас.

0 голосов
/ 05 февраля 2020

Здесь необходимо помнить, что вы имеете дело с объектом response. Объект ответа будет содержать некоторые метаданные о том, что было результатом. Например, код состояния HTTP, URL и т. Д. c ... Если вы хотите получить данные ответа, вам просто нужно получить доступ к телу ответа: 

getUserInformation().then(data => {
   if (data.error) {
      console.log(data.error);
   } else {
     //access the response body
     console.log(data.body);
   }
});
...