Sorting the value not working no change deducted答案

【问题标题】：Sorting the value not working no change deductedSorting the value not working no change deducted
【发布时间】：2022-12-27 22:35:38
【问题描述】：

I am trying to sort ad display my time zone array. But getting no result.

array order is:

(GMT) Monrovia, Reykjavik
(GMT-01:00) Cape Verde Islands
(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna

required order is: (GMT- first, then GMT after GMT+)

(GMT-01:00) Cape Verde Islands
(GMT) Monrovia, Reykjavik
(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna

Live Demo

code:

import { useEffect, useState } from "react";
import "./styles.css";

const array = [
  {
    defaultOrder: 40,
    label: "(GMT) Monrovia, Reykjavik",
    codeId: 1220,
    code: "GMT02",
    codeDesc: "(GMT) Monrovia, Reykjavik",
    codeQualifier: "Time_Zone_Cd"
  },

  {
    defaultOrder: 41,
    label: "(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
    codeId: 297,
    code: "CET",
    codeDesc: "(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
    codeQualifier: "Time_Zone_Cd"
  },
  {
    defaultOrder: 34,
    label: "(GMT-01:00) Cape Verde Islands",
    codeId: 1218,
    code: "CVT",
    codeDesc: "(GMT-01:00) Cape Verde Islands",
    codeQualifier: "Time_Zone_Cd"
  }
];

const SortTimezoneCompare = (data: any[]) => {
  return data.sort((a, b) => {
    var first = a.label.substring(
      a.label.indexOf("T") + 1,
      a.label.indexOf(")")
    );
    first.replace(/^"+:"+$/g, "");

    var second = b.label.substring(
      b.label.indexOf("T") + 1,
      b.label.indexOf(")")
    );
    first.replace(/^"+:"+$/g, "");

    if (parseFloat(first) < parseFloat(second)) {
      return -1;
    }
    if (parseFloat(first) > parseFloat(second)) {
      return 1;
    }
    return 0;
  });
};

export default function App() {
  const [timeZone, setTimeZone] = useState<any[] | null>(null);
  useEffect(() => {
    const sorted = SortTimezoneCompare(array);
    setTimeZone(sorted);
  }, []);
  return (
    <div className="App">
      <ul>{timeZone && timeZone.map((v) => <li>{v.label}</li>)}</ul>
    </div>
  );
}

【问题讨论】：

Does this answer your question? How can you sort an array without mutating the original array?
Array.prototype.sort doesn't return a new array so the state won't update, because you call setTimeZone with the same reference
@Konrad - actually the function which I am calling return a value right? how do you say it's not returns? if something is wrong can you correct me?
return doesn't make a new reference to the array
return [...data].sort((a, b) => { will fix the issue

标签： reactjs typescript

【解决方案1】：

Issue:The issue is if else condition is not getting trigerred because of which it was returning the default sorting that is returning 0

Solution:

Here is how you can test the condition just replace your function with this. Here I am just checking if the variable contains a negative sign or not.

const SortTimezoneCompare = (data: any[]) => {
const newdata= [...data].sort((a, b) => {
  var first = a.label.substring(
    a.label.indexOf("T") + 1,
    a.label.indexOf(")")
  );
  first.replace(/^"+:"+$/g, "");

  if(first.split("").includes("-")){
    return -1
  }
  else if(!first.split("").includes("-")){
    return 1
  }
  
  return 0;
});
return newdata
};

【讨论】：