Я погрузился в 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}
Но какой будет правильный ответ для его анализа? На данный момент ничего не появляется, но я уверен, что это из-за моей обработки с начальным разбором.
Спасибо за вашу помощь и любые советы.