使用Redux从最新日期返回JSON响应中的行或每个对象

时间:2017-12-05 20:08:39

标签: reactjs redux

我有来自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。

0 个答案:

没有答案