按日期排序陣列-有解無憂

export const allFeed = {  feeds: [
{
  id: "1",
  title:
    "Shang- Chi Stays On Record pace With Nearly $35.8 Million In Second Weekend",
  details: [
    "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse minima ex rem quis similique eum ratione quaerat, voluptas molestias ut repudiandae delectus voluptates. Eius esse at tenetur ab accusamus excepturi?",
  ],
  img: "*",
  upvote: "3250",
  downvote: "2250",
  reviews: "5414",
  date: "19-07-2022",
},
{
  id: "2",
  title:
    "Daniel Craig: post your question for actor ahead of his final Bond film",
  details: [
    "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse minima ex rem quis similique eum ratione quaerat, voluptas molestias ut repudiandae delectus voluptates. Eius esse at tenetur ab accusamus excepturi?",
  ],
  img: "*",
  upvote: "2050",
  downvote: "1350",
  reviews: "2253",
  date: "18-07-2019",
},.................



    export default function Feed({ feeds }) {
  const [allFeeds, setAllFeeds] = useState([]);

  const sortArray = (date) => {
    const allDates = {
      date: allFeeds.date,
    };
    const sortProp = allDates[date];
    const sorted = [...allFeeds].sort((a, b) => b[sortProp] - a[sortProp]);
    console.log(sorted);
    setAllFeeds(sorted);
  };

  useEffect(() => {
    setAllFeeds(feeds);
  }, []);

  return (
    <div className="feed">
      <div className="up-left">
        <div>
          <h3>Popular</h3>
        </div>
        <div>
          <h3 onClick={sortArray}>Recents</h3>
        </div>
      </div>
      {allFeeds.map((feed) => (
        <div key={feed.id} className="card">
          <div>
            <p className="feed-title">{feed.title.substring(0, 200)}...</p>
            <div className="card-element">
              <p className="votes">
               .........................

種類

大家好。我希望它按日期排序并在單擊“最近”時重新呈現。但我就是做不到。當我 console.log 我看到陣列未排序。當我執行 console.log(allFeeds.date) 或 (allFeeds.feeds.date) 時，我得到了未定義。感覺就像我錯過了一些非常簡單的東西，但我無法弄清楚。我在哪里失蹤？為什么 console.log 回傳 undefined ？有什么幫助嗎？

uj5u.com熱心網友回復：

我對您可以做什么有一個想法 - 反向排列日期格式（yyyy-mm-dd）然后洗掉-您將有一個可排序的數字，您可以使用該數字對陣列進行排序。

uj5u.com熱心網友回復：

1 如果值在 JSON 中，則使用 JSON.parse() 轉換為陣列...在您的情況下它們不是純陣列

2 創建一個函式并使用new Date()比較日期

  var arr = [{id: 1, date: Mar 12 2012 10:00:00 AM}, {id: 2, date: Mar 8 2012 
                08:00:00 AM}];
 
 sortByDate(arr) {
      arr.sort(function(a,b){
      return Number(new Date(a.readableDate)) - Number(newDate(b.readableDate));
      });

return arr;
}

uj5u.com熱心網友回復：

讓我們來看看錯誤。首先，你得到的原因undefined是你有allFeeds一個帶有提要的物件作為一個陣列。當您的物件console.log(allFeeds.date)中沒有鍵值對時，它會為您提供，并且當您在這里這樣做時，您應該使用因為是一個陣列。 dateallFeedsundefinedconsole.log(allFeeds.feeds.date)console.log(allFeeds.feeds[0].date)allFeeds.feeds

要解決您的問題，您可以使用以下解決方案。

a.sort((x,y)=>{return new Date(x.date.split("-").reverse().join("-")).getTime() - new Date(y.date.split("-").reverse().join("-")).getTime()})

我們這樣做是因為Date(dateString)接收dateString格式yyyy-mm-dd和您的日期dd-mm-yyyy是不可接受的，我們也將其轉換為Date物件，因為作為字串dd-mm-yyyy或yyyy-mm-dd沒有多大意義，在將其轉換為 Date 物件后，我們可以使用它的方法更好地使用資料。

uj5u.com熱心網友回復：

試試這個方法

let arr = [
  {
    id: "1",
    title: "Amoos",
    details: [
      "Lorem ipsum dolor"
    ],
    img: "*",
    upvote: "3250",
    downvote: "2250",
    reviews: "5414",
    date: "2022-07-19"
  },
  { id: "2", date: "1990-12-01" },
  { id: "3", date: "2020-12-15" },
  { id: "4", date: "2007-12-12" }
];

function sortByDateFunc( d1, d2) {
  if (d1.date < d2.date) { return 1; }
  if (d1.date > d2.date) { return -1; }
  return 0;
}

const sortedData = arr.sort(sortByDateFunc);

console.log( sortedData );

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457638.html

標籤：javascript 数组反应排序重新渲染

上一篇：在React中使用uuid作為鍵的正確方法？

下一篇：ReactJs：警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具