我正在嘗試從 fetch 中對一組物件進行排序。我在排序時遇到問題。我都嘗試過選擇和按鈕，但沒有任何效果。誰能確定我缺少什么？
獲取在 App.js 中完成，地圖和排序在這個組件中完成，僅供參考。
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
const FirstPage = ({ movies }) => {
const [movieList, setMovieList] = useState(movies);
const sortByTitle = () => {
const sorted = [...movieList].sort((a, b) => {
return a.title.localeCompare(b.title);
});
setMovieList(sorted);
};
// const [movie, setMovie] = useState([]);
// const [sortMovies, setSortMovies] = useState("alphabetically");
// useEffect(() => {
// const sortedMovies = (type) => {
// const types = {
// vote_average: "vote_average",
// release_date: "release_date",
// origina_title: "original_title",
// };
// const sortProperty = types[type];
// const sorted = [...movies].sort(
// (a, b) => b[sortProperty] - a[sortProperty]
// );
// console.log(sorted);
// setMovie(sorted);
// };
// sortedMovies(sortMovies);
// }, [sortMovies]);
// const sortTitle = () => {
// movies.sort((a, b) => a.title.localeCompare(b.title));
// };
return (
<section>
<select onChange={(e) => e.target.value}>
<option value="vote_average">imdb rating</option>
<option value="release_date">release date</option>
<option value="original_title">alpabetically</option>
</select>
<button onClick={sortByTitle}>Sort by Title</button>
{movies
// .sort((a, b) => a.title.localeCompare(b.title))
.map((movie) => (
<Link key={movie.id} to={`/moviepage/${movie.id}`}>
<h1>{movie.original_title}</h1>
<img
src={`https://image.tmdb.org/t/p/w300/${movie.poster_path}`}
alt={movie.title}
/>
</Link>
))}
</section>
);
};
export default FirstPage;
uj5u.com熱心網友回復：
您正在映射movies變數，但排序陣列存盤在movieList狀態
這應該作業
...
{movieList.map((movie) => (
...
uj5u.com熱心網友回復：
我試過你的想法。但我的應用程式沒有問題。這讓我很清楚。那么，我建議兩點。
- 一旦在 sortByTitle 函式的第一個確認您的 movieList obj。
- 另一個確認自上而下的流資料 'movies' : 型別。
- 從那里，'sorted' 是一個陣列，'movieList' 似乎是一個物件。只是這一點很重要。我告訴你這個。
小心，要注意。
uj5u.com熱心網友回復：
const sortByTitle = () => {
const sorted = [
...movieList.sort((a, b) => {
return a.title.localeCompare(b.title);
})
];
setMovieList(sorted);
};
這就是所需的代碼。將上面的代碼與您的代碼進行比較，您會發現您沒有重新調整新陣列。
sort方法在此處對陣列進行排序，但它不回傳新陣列（即，回傳舊陣列的參考）。React 需要一個新陣列來檢測狀態的任何變化，您可以像我在上面的代碼中所做的那樣，通過為它提供一個新陣列來做到這一點。
證明：檢查此代碼和框
謝謝。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397548.html
上一篇：帕斯卡冒泡排序列印每個排序的行