格式化時間在javascript

Question

我在將字符串正確格式化為可以在表中使用的可行日期時間時遇到了一些問題（必須采用時間/日期時間/非字符串格式才能正確排序）。 該字段稱為avg_runtime 。 API 調用返回如下內容：

{
"data": [
    {
        "id": "01",
        "avg_runtime": "0:05:12.026100",
        "avg_runtime_seconds": 312.0261,
        "file_name": "myFile1",

    },
    {
        "id": "02",
        "avg_runtime": "0:10:03.936321",
        "avg_runtime_seconds": 603.936321,
        "file_name": "myFile2"
    }
  ]
}

我向后端添加了第二個字段，以秒為單位返回avg_runtime_seconds作為小數。 挑戰之一是，在某些情況下，返回值是天數，而不僅僅是 hh:mm:ss，還包括天數，例如： 9 days, 17:30:02.813297 。 這是排序的問題，因為 9 天 17:30:02.813297 sorts out of order with 11 天 2:43:52.300138 亂序排序（我正在使用 Material UI DataGrid 功能進行排序）。 所以我需要將這些字符串轉換為日期時間或一些正確排序的非字符串值。 以下是我目前在 API 調用中格式化值的方式：

  async function getData() {
    await axios
        .get(`https://myapi.com/${ runmode }/products`, {
        headers: {
            'Content-Type': 'application/json'
        }
        })
        .then((response) =>{
            var this_data = response.data.data;
            setData(
                this_data.map((x) => {
                    return {
                        id: parseInt(`${x.product_id}`),
                        file_name: `${x.file_name}`,
                        avg_runtime: `${x.avg_runtime}`,
                        avg_runtime_seconds: `${x.last_rundate}`   
                    }
                })
            );
            setValidationList(
                tthis_data.map((x) => x.product_id)
            )
            setLoadingData(false);
        });
}

我試過使用avg_runtime: new Date( ${x.avg_runtime} ).toDateString(),但返回Invalid Date 。 如何將此值格式化為可用（且可排序）的時間/日期時間格式？

更新：我能夠按照下面的建議使用 Value Getter，但它仍然無法正確排序，即使使用數值也是如此。 我發現似乎是錯誤的根源。 雖然 avg_runtime_seconds 的小數點設置為 6 位，但排序似乎並未考慮整體值。 查看 9 天 17 小時 45 分鍾與 2 小時 21 分鍾之間的平均運行時間秒數差異。 排序似乎是基於字符的位置，而不是考慮小數點所在的位置。 有什么可以幫助解決這個問題的嗎？

Answer 1

這是一個很難解決的問題。 我必須做的第一件事是獲取一個字段，其中包含我可以在排序時引用的數值。 我將 avg_runtime 以秒為單位作為浮點數，但@mui DataGrid 似乎只能與整數一起正常工作，所以我使用 Math.ceil（向上舍入）轉換它們。 我還注意到使用值獲取器的最初建議似乎仍然按 DataGrid 中顯示的值排序。 我嘗試了另一個使用GridRenderCellParams的建議。 這有效，我創建了一個沙箱來測試它。 下面的代碼是我使用的，但這里是沙箱，可以更好地可視化解決方案。 *注意 - 下面的 avg_runtime_sconds 值已更改為整數，而不是使用Math.ceil 。

import Box from "@mui/material/Box";
import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "file_name",
    headerName: "File Name",
    width: 150,
    editable: true
  },
  {
    field: "avg_runtime",
    headerName: "Avg Runtime Orig",
    width: 150,
    editable: true
  },
  {
    field: "avg_runtime_seconds",
    headerName: "Avg Runtime Ref Secs",
    width: 150,
    editable: true,
    renderCell: (params: GridRenderCellParams) => (
      <div>{params.row.avg_runtime}</div>
    )
  }
];

const rows = [
  {
    id: "01",
    avg_runtime: "0:05:12.026100",
    avg_runtime_seconds: 312,
    file_name: "myFile1"
  },
  {
    id: "02",
    avg_runtime: "0:10:03.936321",
    avg_runtime_seconds: 603,
    file_name: "myFile2"
  },
  {
    id: "03",
    avg_runtime: "9 days, 17:45:04.823807",
    avg_runtime_seconds: 841670,
    file_name: "myFile3"
  },
  {
    id: "04",
    avg_runtime: "11 days, 3:01:15.710670",
    avg_runtime_seconds: 961275,
    file_name: "myFile4"
  }
];

export default function DataGridDemo() {
  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
        experimentalFeatures={{ newEditingApi: true }}
      />
    </Box>
  );
}