我正在尝试从 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热心网友回复：

我试过你的想法。但我的应用程序没有问题。这让我很清楚。那么，我建议两点。

1. 一旦在 sortByTitle 函式的第一个确认您的 movieList obj。
2. 另一个确认自上而下的流资料 'movies' : 型别。
3. 从那里，'sorted' 是一个阵列，'movieList' 似乎是一个物件。只是这一点很重要。我告诉你这个。

小心，要注意。

uj5u.com热心网友回复：

  const sortByTitle = () => {
    const sorted = [
      ...movieList.sort((a, b) => {
        return a.title.localeCompare(b.title);
      })
    ];
    setMovieList(sorted);
  };

这就是所需的代码。将上面的代码与您的代码进行比较，您会发现您没有重新调整新阵列。

sort方法在此处对阵列进行排序，但它不回传新阵列（即，回传旧阵列的参考）。React 需要一个新阵列来检测状态的任何变化，您可以像我在上面的代码中所做的那样，通过为它提供一个新阵列来做到这一点。

证明：检查此代码和框

谢谢。