如何對一系列帖子進行排序

我想按 createdAt 日期對一組帖子進行排序，現在帖子首先按最舊的帖子排序，然后是新的帖子，但我想以相反的方式排序！已經嘗試過.sort((a, b) => b.createdAt - a.createdAt)但沒有用，我不確定這是否是實作它的方法。post資料存盤在mongodb中如下圖所示

帖子模型：

Post.jsx代碼：

export default function Posts({ posts = [] }) {

    const [filteredResults, setFilteredResults] = useState([]);
    const [searchInput, setSearchInput] = useState('');
    const [isLoading, setIsLoading] = useState(false);
  
    const filter = (e) => {
      const keyword = e.target.value;
  
        if (keyword !== '') {
            const filteredData = posts.filter((post) => {
                return Object.values(post)
                .join('')
                .toLowerCase()
                .includes(searchInput.toLowerCase())
            })
            setFilteredResults(filteredData)
            
        } else {
          setFilteredResults(posts)
        }
  
        setSearchInput(keyword);
    }
    console.log(filteredResults)

  return (
    <div className="posts">
      <div className="postsContainer">

      <div className="postsSearchContainer">
            <div className="postsSearch">
                  <div class="postsSearchIconContainer">
                      <SearchIcon class="w-5 h-5" />
                  </div>
                    <input type="text"
                    className="postsSearchInput"
                    placeholder="???"
                    name="postsSearchText"
                    id="postsSearchText"
                    onChange={filter}
                    />
              </div>
              {/* ENDS OF POSTSSEARCHCONTAINER */}
      </div>
      {/* ENDS OF POSTSSEARCH */}
    <div className="postsBoxContainer">
      <div className="postsBox">
      {isLoading ? (
          <Box sx={{ display: 'flex' }}>
            <CircularProgress />
          </Box>
      ) : (
        filteredResults.length > 0 ? (
          filteredResults.map((p) => (
            <Post post={p} />
          ))
          ) : (posts.map((p) => (
            <Post post={p} />
          ))
        )
        }
      </div>
      </div>
      {/* ENDS OF POSTSBOX */}

      </div>
      {/* ENDS OF POSTCONTAINER */}

    </div>
    //ENDS OF POSTS

  );
};

The Code I tried:

(
        filteredResults.length > 0 ? (
          filteredResults.map((p) => (
            <Post post={p} />
          )).sort((a, b) => b.createdAt - a.createdAt)
          ) : (posts.map((p) => (
            <Post post={p} />
          )).sort((a, b) => b.createdAt - a.createdAt))
        )

uj5u.com熱心網友回復：

將您的日期字串轉換為時間戳（如果它們都準備好一個日期物件，只需使用 getTime()

sort((a, b) => new Date(b.createdAt).getTime()  - new Date(a.createdAt).getTime() )

uj5u.com熱心網友回復：

解決方案

 filteredResults.length > 0 ? (
          filteredResults.map((p) => (
            <Post post={p} />
          )).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
          ) : (posts.map((p) => (
            <Post post={p} />
          )).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)))
        )

//example
const data = [
    "2022-11-17T17:51:45.537 00:00",
    "2022-11-17T17:51:45.539 00:00",
    "2022-11-16T18:51:45.537 00:00",
    "2022-11-15T17:51:45.537 00:00",
    "2022-11-16T17:51:45.537 00:00"
    ]
    
console.log(data.sort((a, b) => new Date(b) - new Date(a)));

uj5u.com熱心網友回復：

我猜你可能想先排序然后映射它，因為你正在從地圖回傳組件然后嘗試對它們進行排序如果我沒有錯的話這不是故意的......

正如sort就地排序陣列（改變原始陣列）一樣，您可能希望獲得副本并對其進行排序。

例如[... your_data].sort((a,b)=> ....).map(p => <Post post={p} />)

您可以從此處建議的其他答案中采用排序時間的方法...

標籤：javascript反应排序

上一篇：列出非唯一條目及其按降序排序的計數

下一篇：如何從二進制資料幀中找到公共邊？