Реагировать - запросить выборочный анализ проблемы - PullRequest
0 голосов
/ 03 ноября 2018

Я погрузился в React и застрял в проблеме, пытаясь использовать собственные примеры из прошлого проекта.

Для этого вопроса я буду использовать следующий URL API https://webservices.rrts.com/TrackWebApi/api/values/443974522

Возвращает сведения об отправке (или массив, если вы вводите несколько чисел для поиска). В этом случае я буду беспокоиться только об одном.

Основываясь на примерах и руководствах, я пришел к этому набору кодов как к правильному способу обработки возврата и передачи данных на новую страницу:

  _executeQuery = (query) => {
    console.log(query);
    this.setState({ isLoading: true });
    fetch(query, {
  method: 'GET'})
      .then(response => response.json())
      .then(json => this._handleResponse(json.response))
      .catch(error =>
        this.setState({
          isLoading: false,
          message: 'Something bad happened ' + error
      }));
  };

  _handleResponse = (response) => {
    console.log(response);
    this.setState({ isLoading: false , message: '' });
     this.props.navigation.navigate('ShipmentResults', {listings: response.SearchResults},);
  };

Это возвращает в консоли первый (который является запросом): https://webservices.rrts.com/TrackWebApi/api/values/443974522

и вот что response возвращает: undefined

Теперь, поэкспериментируя с этим, если я изменю _executeQuery на:

  _executeQuery = (query) => {
    console.log(query);
    this.setState({ isLoading: true });
    fetch(query, {
  method: 'GET'})
      .then(response => this._handleResponse(response))
      .catch(error =>
        this.setState({
          isLoading: false,
          message: 'Something bad happened ' + error
      }));
  };

Затем query возвращает: https://webservices.rrts.com/TrackWebApi/api/values/443974522

И response из _handleResponse возвращает:

Response {
  "_bodyInit": "{\"SearchResults\":[{\"SearchItem\":\"443974522\",\"Shipment\":{\"DRAvail\":true,\"ProNumber\":\"443974522\",\"PickupNumber\":\"50904347\",\"CustomerNumber\":\"316966\",\"BOLNumber\":\"158328\",\"BOLReceived\":true,\"PODReceived\":false,\"PONumber\":\"\",\"OrderNumber\":\"25634854\",\"OperationalStatus\":\"PICK\",\"Status\":\"P\",\"InspectionAvailable\":false,\"ProDateTime\":\"2018-10-05T00:00:00\",\"DeliverDateTime\":\"2018-10-12T00:00:00\",\"SpecInst1\":\"CBD 720 570 5457\",\"SpecInst2\":\"\",\"SpecInst3\":\"\",\"Scac\":\"COEP\",\"Location\":\"CHI\",\"Dest\":\"DEN\",\"Manifest\":\"327030-1\",\"BillToAccount\":\"\",\"Pieces\":1,\"Weight\":214,\"ApptDateTime\":\"2018-10-12T00:00:00\",\"DeliveredDateTime\":\"2018-10-12T00:00:00\",\"ProjectedDeliveryDateTime\":\"2018-10-11T00:00:00\",\"HAWB\":null,\"Origin\":{\"Name\":\"MAGNUSON GROUP INC\",\"Address1\":\"1400 INTERNATIONALE PKWY\",\"Address2\":\"\",\"City\":\"WOODRIDGE\",\"State\":\"IL\",\"PostalCode\":\"60517\"},\"Consignee\":{\"Name\":\"EON OFFICE PRODUCTS\",\"Address1\":\"60 TEJON ST\",\"Address2\":\"\",\"City\":\"DENVER\",\"State\":\"CO\",\"PostalCode\":\"80223\"},\"PickupTerminal\":{\"TerminalName\":\"Customer Service\",\"TerminalTollFreePhone\":\"(855) 776-3567\"},\"Comments\":[{\"ActivityCode\":null,\"StatusComment\":\"10/05/2018 08:20 AM Pickup Request Received.\",\"StatusDateTime\":\"2018-10-05T08:20:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"PU\",\"StatusComment\":\"10/05/2018 10:09 AM Shipment was picked up\",\"StatusDateTime\":\"2018-10-05T10:09:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"ARQ\",\"StatusComment\":\"10/05/2018 05:14 PM Appointment Pending\",\"StatusDateTime\":\"2018-10-05T17:14:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"CLO\",\"StatusComment\":\"10/05/2018 08:22 PM Trailer Closed - ready for dispatch\",\"StatusDateTime\":\"2018-10-05T20:22:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"DSP\",\"StatusComment\":\"10/06/2018 08:45 AM Trailer dispatched from BOLINGBROOK, IL to DENVER, CO.\",\"StatusDateTime\":\"2018-10-06T08:45:00\",\"Status\":\"L1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"ARV\",\"StatusComment\":\"10/08/2018 02:00 PM Trailer arrived at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-08T14:00:00\",\"Status\":\"O1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"UNL\",\"StatusComment\":\"10/09/2018 09:00 AM Trailer unloaded at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-09T09:00:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"OFD\",\"StatusComment\":\"10/12/2018 06:00 AM Shipment out for delivery\",\"StatusDateTime\":\"2018-10-12T06:00:00\",\"Status\":\"OD\",\"Reason\":\"NS\"},{\"ActivityCode\":\"DEL\",\"StatusComment\":\"10/12/2018 12:00 PM Shipment delivered to consignee\",\"StatusDateTime\":\"2018-10-12T12:00:00\",\"Status\":\"D1\",\"Reason\":\"NS\"}],\"Position\":null,\"ReferenceNumbers\":[],\"SchedArriveEarly\":\"2018-10-05T12:00:00\",\"SchedArriveLate\":\"2018-10-05T15:00:00\",\"ActualDeparture\":\"2018-10-05T10:09:00\",\"OrderDate\":\"2018-10-05T08:20:00\",\"PickedUp\":true},\"DisplayBOL\":false,\"DisplayPOD\":true,\"DisplayInvoice\":false,\"DisplayInspection\":false,\"DisplayWI\":false}]}",
  "_bodyText": "{\"SearchResults\":[{\"SearchItem\":\"443974522\",\"Shipment\":{\"DRAvail\":true,\"ProNumber\":\"443974522\",\"PickupNumber\":\"50904347\",\"CustomerNumber\":\"316966\",\"BOLNumber\":\"158328\",\"BOLReceived\":true,\"PODReceived\":false,\"PONumber\":\"\",\"OrderNumber\":\"25634854\",\"OperationalStatus\":\"PICK\",\"Status\":\"P\",\"InspectionAvailable\":false,\"ProDateTime\":\"2018-10-05T00:00:00\",\"DeliverDateTime\":\"2018-10-12T00:00:00\",\"SpecInst1\":\"CBD 720 570 5457\",\"SpecInst2\":\"\",\"SpecInst3\":\"\",\"Scac\":\"COEP\",\"Location\":\"CHI\",\"Dest\":\"DEN\",\"Manifest\":\"327030-1\",\"BillToAccount\":\"\",\"Pieces\":1,\"Weight\":214,\"ApptDateTime\":\"2018-10-12T00:00:00\",\"DeliveredDateTime\":\"2018-10-12T00:00:00\",\"ProjectedDeliveryDateTime\":\"2018-10-11T00:00:00\",\"HAWB\":null,\"Origin\":{\"Name\":\"MAGNUSON GROUP INC\",\"Address1\":\"1400 INTERNATIONALE PKWY\",\"Address2\":\"\",\"City\":\"WOODRIDGE\",\"State\":\"IL\",\"PostalCode\":\"60517\"},\"Consignee\":{\"Name\":\"EON OFFICE PRODUCTS\",\"Address1\":\"60 TEJON ST\",\"Address2\":\"\",\"City\":\"DENVER\",\"State\":\"CO\",\"PostalCode\":\"80223\"},\"PickupTerminal\":{\"TerminalName\":\"Customer Service\",\"TerminalTollFreePhone\":\"(855) 776-3567\"},\"Comments\":[{\"ActivityCode\":null,\"StatusComment\":\"10/05/2018 08:20 AM Pickup Request Received.\",\"StatusDateTime\":\"2018-10-05T08:20:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"PU\",\"StatusComment\":\"10/05/2018 10:09 AM Shipment was picked up\",\"StatusDateTime\":\"2018-10-05T10:09:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"ARQ\",\"StatusComment\":\"10/05/2018 05:14 PM Appointment Pending\",\"StatusDateTime\":\"2018-10-05T17:14:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"CLO\",\"StatusComment\":\"10/05/2018 08:22 PM Trailer Closed - ready for dispatch\",\"StatusDateTime\":\"2018-10-05T20:22:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"DSP\",\"StatusComment\":\"10/06/2018 08:45 AM Trailer dispatched from BOLINGBROOK, IL to DENVER, CO.\",\"StatusDateTime\":\"2018-10-06T08:45:00\",\"Status\":\"L1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"ARV\",\"StatusComment\":\"10/08/2018 02:00 PM Trailer arrived at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-08T14:00:00\",\"Status\":\"O1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"UNL\",\"StatusComment\":\"10/09/2018 09:00 AM Trailer unloaded at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-09T09:00:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"OFD\",\"StatusComment\":\"10/12/2018 06:00 AM Shipment out for delivery\",\"StatusDateTime\":\"2018-10-12T06:00:00\",\"Status\":\"OD\",\"Reason\":\"NS\"},{\"ActivityCode\":\"DEL\",\"StatusComment\":\"10/12/2018 12:00 PM Shipment delivered to consignee\",\"StatusDateTime\":\"2018-10-12T12:00:00\",\"Status\":\"D1\",\"Reason\":\"NS\"}],\"Position\":null,\"ReferenceNumbers\":[],\"SchedArriveEarly\":\"2018-10-05T12:00:00\",\"SchedArriveLate\":\"2018-10-05T15:00:00\",\"ActualDeparture\":\"2018-10-05T10:09:00\",\"OrderDate\":\"2018-10-05T08:20:00\",\"PickedUp\":true},\"DisplayBOL\":false,\"DisplayPOD\":true,\"DisplayInvoice\":false,\"DisplayInspection\":false,\"DisplayWI\":false}]}",
  "headers": Headers {
    "map": Object {
      "cache-control": "no-cache",
      "content-encoding": "gzip",
      "content-length": "1322",
      "content-type": "application/json; charset=utf-8",
      "date": "Sat, 03 Nov 2018 17:41:02 GMT",
      "expires": "-1",
      "pragma": "no-cache",
      "server": "Microsoft-IIS/8.0",
      "vary": "Accept-Encoding",
      "x-aspnet-version": "4.0.30319",
      "x-powered-by": "ASP.NET",
    },
  },
  "ok": true,
  "status": 200,
  "statusText": undefined,
  "type": "default",
  "url": "https://webservices.rrts.com/TrackWebApi/api/values/443974522",
}

Каким будет правильный метод в этом случае для возврата массива SearchResults?

На этом этапе я передаю данные на экран результатов следующим способом: this.props.navigation.navigate('ShipmentResults', {listings: response.SearchResults}

Но какой будет правильный ответ для его анализа? На данный момент ничего не появляется, но я уверен, что это из-за моей обработки с начальным разбором.

Спасибо за вашу помощь и любые советы.

1 Ответ

0 голосов
/ 03 ноября 2018
_executeQuery = (query) => {
this.setState({ isLoading: true });
fetch(query, {
method: 'GET'})
  .then(response => response.json())
  .then(json => this._handleResponse(json))
  .catch(error =>
    this.setState({
      isLoading: false,
      message: 'Something bad happened ' + error
  }));
};

 _handleResponse = (response) => {
 this.setState({ isLoading: false , message: '' },()=>{
    this.props.navigation.navigate('ShipmentResults', {listings: response});
 });
};

Лучше передать весь массив и получить необходимый объект из массива, когда это необходимо. Также я переместил вашу навигацию в обратный вызов setState, чтобы навигация происходила после установки значений.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...