我有来自GET请求的JSON响应,格式如下所示。我想过滤并显示最新日期(更新日期)的条目。有多个条目具有相同的' PK'。在这种情况下,我只想显示最后一个日期。我想要一个提供这种结果的过滤功能。代码正在反应中。我试图在传递组件之前在reducer中过滤掉它。
我的行动:
export const trackingInfoFetchDataSuccess = trackingId => {
return {
type: TRACKINGINFO_FETCH_DATA_SUCCESS,
payload: trackingId
};
}
//获取功能
export const trackingInfoFetchData= url => {
return (dispatch) => {
dispatch(trackingInfoIsLoading(true));
const myData = myObject;
fetch(url)
.then((response) => {
if (!response.ok) {
throw Error(response.statusText);
}
dispatch(trackingInfoIsLoading(false));
console.log(response);
return response;
})
.then((response) => response.json())
.then((items) => dispatch(trackingInfoFetchDataSuccess(items)))
.catch(() => dispatch(trackingInfoHasErrored(true)));
};
}
我的减速机:
export function trackingInformation(state = [], action) {
switch (action.type) {
case TRACKINGINFO_FETCH_DATA_SUCCESS:
//Map or any filtering needs to be added here
return action.payload;
default:
return state;
}
}
JSON响应
[
{
"Pk" : "20",
"CustomerPk" : "2juuxvk9f7zpxysapmqh3w2sh4hwhe4r",
"TrackingId" : "Cancel: Recreated Account",
"Comments" : "test",
"ByRep" : "bsahoo",
"Created" : "2014-01-16 11:59:00",
"Updated" : "2014-01-16 11:59:02",
"ExternalRef1" : null,
"ExternalRef2" : null,
"ExternalRef3" : null,
"ExternalData" : null
},
{
"Pk" : "21",
"CustomerPk" : "49qh2tti5ddsev9a2536g5cxnw4pdj96",
"TrackingId" : "ExternalPartner: Stream",
"Comments" : "From Unit Test",
"ByRep" : "Unit Test",
"Created" : "2017-09-28 13:28:42",
"Updated" : "2017-09-28 20:28:42",
"ExternalRef1" : "value1",
"ExternalRef2" : "value2",
"ExternalRef3" : "value3",
"ExternalData" : "Value 5"
},
{
"Pk" : "21",
"CustomerPk" : "hkerfq55nmvsxiv2kwebx9ksek7xv648",
"TrackingId" : "Cancel: Recreated Account",
"Comments" : "test",
"ByRep" : "mageshwari",
"Created" : "2013-11-14 14:15:49",
"Updated" : "2013-11-14 14:15:51",
"ExternalRef1" : null,
"ExternalRef2" : null,
"ExternalRef3" : null,
"ExternalData" : null
},
{
"Pk" : "22",
"CustomerPk" : "5iin3cinsxawg3paya3zdsjq8bwnfw97",
"TrackingId" : "Cancel: Call Quality",
"Comments" : "Unit Test",
"ByRep" : "system",
"Created" : "2017-11-28 22:59:43",
"Updated" : "2017-11-29 06:59:43",
"ExternalRef1" : null,
"ExternalRef2" : null,
"ExternalRef3" : null,
"ExternalData" : null
},
{
"Pk" : "23",
"CustomerPk" : "49qh2tti5ddsev9a2536g5cxnw4pdj96",
"TrackingId" : "ExternalPartner: Stream",
"Comments" : "From Unit Test",
"ByRep" : "Unit Test",
"Created" : "2017-09-22 04:47:46",
"Updated" : "2017-09-22 11:47:46",
"ExternalRef1" : "value1",
"ExternalRef2" : "value2",
"ExternalRef3" : "value3",
"ExternalData" : "Value 5"
},
{
"Pk" : "22",
"CustomerPk" : "z9tcpsc7im4a3av5dw3hey8eemzr4pk4",
"TrackingId" : "Cancel: Call Quality",
"Comments" : "Unit Test",
"ByRep" : "system",
"Created" : "2017-07-21 17:17:05",
"Updated" : "2017-07-22 00:15:33",
"ExternalRef1" : null,
"ExternalRef2" : null,
"ExternalRef3" : null,
"ExternalData" : null
},
{
"Pk" : "22",
"CustomerPk" : "49qh2tti5ddsev9a2536g5cxnw4pdj96",
"TrackingId" : "ExternalPartner: Stream",
"Comments" : "From Unit Test",
"ByRep" : "Unit Test",
"Created" : "2017-08-28 11:51:53",
"Updated" : "2017-08-28 18:51:54",
"ExternalRef1" : "value1",
"ExternalRef2" : "value2",
"ExternalRef3" : "value3",
"ExternalData" : "Value 5"
}]
JSON键被修改为仅提供我想要实现的内容的一个示例
一旦数据被过滤,我只会在表格中显示带有最新日期的条目,而不是将JSON响应中的所有条目显示在表格中。
我正在使用React-Bootstrap-table进行表示。
现在我在表格中显示整个JSON。