如何在点击时对 JSON 数组进行排序？答案

【问题标题】：How to sort JSON array on click?如何在点击时对 JSON 数组进行排序？
【发布时间】：2023-04-06 11:45:01
【问题描述】：

我正在尝试做一个按名称和年份对 JSON 数组进行排序的按钮。我这样做了，它按年正确排序结果，但我愿意在点击时更改顺序。我还希望可以选择按名称对结果进行排序。

const showResults = movies
.sort((a, b) => (a.Year < b.Year ? -1 : 1))
.map((movie, idx) => {
return (
  <div key={idx}>
    <div>
      <h4>{movie.Year}</h4>
      <h3>{movie.Title}</h3>
    </div>
  </div>
)

我也试过这个，然后点击里面调用它：

const sortResults = movies.sort((a, b) => (a.Year < b.Year ? 1 : -1));

<button onClick={sortResults}>Sort results</button>

编辑：

找到了这个解决方案。它部分有效，但不是我想要的。

首先我做了新的状态钩子：

const [sortResults, setSortResults] = useState('');

选择下拉列表的处理程序：

const sortHandler = (e) => {
  setSortResults(e.target.value);
}

然后我在showResults 中编写了新的排序方法。前两部按年份排序，后两部按标题排序：

const showResults = movies
.sort((a, b) => {
  if (sortResults === 'newest') {
    return (a.Year > b.Year) ? -1 : 1;
  }
  if (sortResults === 'oldest') {
    return (a.Year > b.Year) ? 1 : -1;
  }
  if (sortResults === 'az') {
    return (a.Title > b.Title);
  }
  if (sortResults === 'za') {
    return (a.Title < b.Title);
  }
  return 0;
}

...

)

然后我为两个排序选项创建了select 下拉列表：

<select onChange={sortHandler} defaultValue='none'>
  <option disabled value='none'>Sort</option>
  <option value='oldest'>Oldest</option>
  <option value='newest'>Newest</option>
</select>

<select onChange={sortHandler} defaultValue='none'>
  <option disabled value='none'>Sort</option>
  <option value='az'>A-Z</option>
  <option value='za'>Z-A</option>
</select>

我想将这些 select 下拉列表交换为按钮并通过单击相同的按钮来更改顺序。示例：我单击年份按钮，订单更改为最新 -> 最旧，我再次单击按钮，订单更改回最旧 -> 最新。该怎么做？

EDIT2：

我试图用这种方式修改sortHandler。当我第一次单击按钮时，值更改为'old'，但之后该值不再更改..

const sortHandler = (e) => {
  setSortResults(e.target.value);
  if (e.target.value === '') {
    setSortResults('old');
  }
  else if (e.target.value === 'old') {
    setSortResults('new');
  }
}

这是按钮的代码：

<button value='' onClick={sortHandler}>
  Sort
</button>

【问题讨论】：

标签： arrays reactjs json sorting

【解决方案1】：

注意：您遇到的问题似乎与数据的排序有关，而不是使用 React 显示数据，下面的解决方案仅实现了排序功能。此外，在不知道之前出现的 React 代码的情况下，我不知道数据是如何定义的，所以我假设一个简单的变量，如果您使用 useState 挂钩，则需要根据您的 useState 函数更新值。

以下是解决方案，onclick 需要设置为函数而不是变量。此解决方案在单击按钮时调用sortOnClick()。 sortOnClick() 然后确定我们是否按标题排序，可以根据需要设置此值，即 html 中的下拉列表，然后使用定义的可重用排序函数之一。该函数将电影的值记录到控制台中。

javascript index.js

let movies = [
    {
        year : 1998,
        title : 'A movie'
    },
    {
        year : 2011,
        title : 'Captian America'
    },
    {
        year : 2005,
        title : 'Toy Story 2'
    },
    {
        year : 2006,
        title : 'B movie'
    }
]

function sortByTitle(a, b){
    var uppercase_a = a.title.toUpperCase();
    var uppercase_b = b.title.toUpperCase();
    return (uppercase_a > uppercase_b)? 1 : -1
}

function sortByYear(a,b){
    return (a.year > b.year)? 1: -1
}

function sortOnClick(){
    let title = true;
    
    if(title){
        movies = movies.sort((a,b) => sortByTitle(a,b))
    }
    else{
        movies = movies.sort((a,b) => sortByYear(a,b))
    }
    console.log(movies)
}

html index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./index.js"></script>
    <button onclick="sortOnClick()">Sort</button>
</body>
</html>

我希望这会有所帮助。

【讨论】：

你有两个问题，一个是你没有反应性地渲染你的电影数据。您正在创建一次 html，当调用 setMovie 时不会重新运行，因此当数组更改时您看不到 ui 更新。第二个是您需要为每个创建一个排序函数并在按钮的 onClick 中调用它。
我就是想不通这个问题。我更新了我尝试过的原始帖子..