串列不會按日期排序

我正在嘗試獲取按時間順序顯示的訂單串列，但我無法讓它作業。我的資料存盤在 Mongodb 資料庫中，我在前端使用 react.js。我嘗試過使用排序：

{orders.sort((a,b) => b.createdAt - a.createdAt).map((order) => (....)}

但什么都沒有改變。我非常感謝任何有關如何解決此問題的幫助或建議。謝謝！

此頁面的完整代碼：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { deleteOrder, listOrders } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import { ORDER_DELETE_RESET } from '../constants/orderConstants';

export default function OrderListScreen(props) {
  const orderList = useSelector((state) => state.orderList);
  const { loading, error, orders } = orderList;
  const orderDelete = useSelector((state) => state.orderDelete);
  const {
    loading: loadingDelete,
    error: errorDelete,
    success: successDelete,
  } = orderDelete;

  const userSignin = useSelector((state) => state.userSignin);
  const { userInfo } = userSignin;
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: ORDER_DELETE_RESET });
    dispatch(listOrders({ seller: sellerMode ? userInfo._id : '' }));
  }, [dispatch, sellerMode, successDelete, userInfo._id]);
  const deleteHandler = (order) => {
    // TODO: delete handler
    if (window.confirm('Are you sure to delete?')) {
        dispatch(deleteOrder(order._id));
      }
  };


  return (
    <div>
      <h1>Orders</h1>
      {loadingDelete && <LoadingBox></LoadingBox>}
      {errorDelete && <MessageBox variant="danger">{errorDelete}</MessageBox>}
      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        <table className="table">
          <thead>
            <tr className="table_row">
              <th className="main">ID</th>
              <th className="main">DATE</th>
              <th className="main">TOTAL</th>
              <th className="main">ACTIONS</th>
            </tr>
          </thead>
          <tbody>
            {orders.sort((a,b) => b.createdAt - a.createdAt).map((order) => (
              <tr className="table_row" key={order._id}>
                <td className="data">{order._id}</td>
                <td className="data">{order.createdAt.substring(0, 10)}</td>
                <td className="data">{order.totalPrice.toFixed(2)}</td>
                <td className="data">
                  <button
                    type="button"
                    className="small"
                    onClick={() => {
                      props.history.push(`/order/${order._id}`);
                    }}
                  >
                    Details
                  </button>
                  <button
                    type="button"
                    className="small"
                    onClick={() => deleteHandler(order)}
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

uj5u.com熱心網友回復：

如果它是 ISO-8601 字串，您可以使用Date建構式將字串決議為日期，然后您可以減去該日期。

// ISO string creates a ISO-8601 string
const dates = [new Date(2022, 4, 26).toISOString(), new Date(2022, 4, 23).toISOString(), new Date(2022, 3, 23).toISOString(), new Date(2022, 5, 23).toISOString(), new Date(2021, 4, 23).toISOString()];
console.log(dates);


dates.sort((a, b) => new Date(a) - new Date(b));
console.log(dates);

如果您想實際使用Date物件，您可以使用map()before which 將回傳一個物件陣列Date。如果您想對日期進行進一步處理，這將非常有用。

// ISO string creates a ISO-8601 string
const dates = [new Date(2022, 4, 26).toISOString(), new Date(2022, 4, 23).toISOString(), new Date(2022, 3, 23).toISOString(), new Date(2022, 5, 23).toISOString(), new Date(2021, 4, 23).toISOString()];
console.log(dates);
const sortedParsedDates = dates.map(dateStr => new Date(dateStr)).sort((a, b) => a - b);
console.log(sortedParsedDates);
// now we actually have Date objects we can work with
console.log(sortedParsedDates[0] instanceof Date);

標籤：反应 mongodb

上一篇：Mongodb聚合和查找

下一篇：PythonMongoDB排名索引接收？