在 React 中使用选择和按钮对数组进行排序问题

Posted 2023-02-21

【中文标题】在 React 中使用选择和按钮对数组进行排序问题

【英文标题】：Problems sorting array with select and button in React

【发布时间】：2022-01-23 21:27:04

【问题描述】：

我正在尝试从 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;

【问题讨论】：

如果能帮助您解决此问题，请将我的回答标记为已接受。

【参考方案1】：

您正在映射movies 变量，但排序后的数组存储在movieList 状态

这应该可行

...
movieList.map((movie) => (
...

【讨论】：

谢谢！我是新手，有一个简单的答案……编码时间太多，无法弄清楚。但现在你已经指出了这一点很明显。

嗯，现在它停止工作了。明天我会看看一切。不过谢谢！

【参考方案2】：

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

在 sortByTitle 函数的第一个确认您的 movieList obj。 另一个确认自上而下流数据“电影”：类型。 从那里，'sorted' 是一个数组，'movieList' 看起来像一个对象。 这很重要。我告诉你。

小心，注意。

【参考方案3】：

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

这是必需的代码。将上面的代码与您的代码进行比较，您会发现您没有重新调整新数组。

sort 方法在原地对数组进行排序 READ HERE 但它不返回新数组（即返回旧数组的引用）。 React 需要一个新数组来检测状态的任何变化，您可以像我在上面的代码中那样提供一个新数组来做到这一点。

证明：检查this codesandbox

谢谢。