如何在整数列上实现排序？

Question

const customerList = [{"ID":1,"name":"Queen","email":"Queen@gmail.com","counts_of_visit":13,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":2,"name":"Jack","email":"Jack@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-04-30T02:08:23.000Z","contacted":"Yes"},{"ID":3,"name":"Nolan","email":"Nolan@gmail.com","counts_of_visit":6,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":4,"name":"Janet","email":"Janet@gmail.com","counts_of_visit":7,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":5,"name":"Loris","email":"Loris@gmail.com","counts_of_visit":8,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":6,"name":"Bree","email":"Bree@gmail.com","counts_of_visit":3,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":7,"name":"Daphne","email":"Daphne@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-04-15T09:08:23.000Z","contacted":"Yes"},{"ID":8,"name":"Bari","email":"Bari@gmail.com","counts_of_visit":4,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":9,"name":"Billy","email":"Billy@gmail.com","counts_of_visit":5,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":10,"name":"Belia","email":"Belia@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":11,"name":"Moses","email":"Moses@gmail.com","counts_of_visit":9,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":12,"name":"Alex","email":"Alex@gmail.com","counts_of_visit":7,"latest_time_of_visit":"2021-02-10T01:08:23.000Z","contacted":"Yes"},{"ID":13,"name":"Alix","email":"Alix@gmail.com","counts_of_visit":8,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":14,"name":"Wendell","email":"Wendell@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":15,"name":"Ceola","email":"Ceola@gmail.com","counts_of_visit":5,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"}]

  <th class="countheader" onClick={() => sortCountCustomer}>
    Counts of Visit {getCountArrow()}
  </th>

  const [counterCount, setcounterCount] = useState(0);

  function sortCountCustomer() {
    const sortedCountCustomer = [...customerList];
    let sortCountVisit = counterCount;
        
    //check the current sortCount, if it is 2 then go back to 1,
    //if not then increase by 1

    if (sortCountVisit === 2) {
      sortCountVisit = 1;
      setCounterCount(1);
    } else {
      sortCountVisit += 1;
      setCounterCount(sortCountVisit);
    }

    console.log(sortCountVisit);
    
    if (sortCountVisit < 3) {
      sortedCountCustomer.sort(function (x, y) {
        if (sortCountVisit === 1) {
          return x.counts_of_visit < y.counts_of_visit ? 0 : x.counts_of_visit ? -1 : 1;
        } else if (sortCountVisit === 2) {
          return x.counts_of_visit > y.counts_of_visit ? 0 : x.counts_of_visit ? 1 : -1;
        }
      });
      setCustomerList(sortedCountCustomer);
    }
  }

我的函数在对整数进行升序和降序排序时不起作用 虽然我在单击标题时调用了该函数对 onClick 方法进行排序

我编辑了我的代码以显示 customerList 和 countercount 的来源

Answer 1

这有帮助吗：

const base_customerList = [{"ID":1,"name":"Queen","email":"Queen@gmail.com","counts_of_visit":13,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":2,"name":"Jack","email":"Jack@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-04-30T02:08:23.000Z","contacted":"Yes"},{"ID":3,"name":"Nolan","email":"Nolan@gmail.com","counts_of_visit":6,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":4,"name":"Janet","email":"Janet@gmail.com","counts_of_visit":7,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":5,"name":"Loris","email":"Loris@gmail.com","counts_of_visit":8,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":6,"name":"Bree","email":"Bree@gmail.com","counts_of_visit":3,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":7,"name":"Daphne","email":"Daphne@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-04-15T09:08:23.000Z","contacted":"Yes"},{"ID":8,"name":"Bari","email":"Bari@gmail.com","counts_of_visit":4,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":9,"name":"Billy","email":"Billy@gmail.com","counts_of_visit":5,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":10,"name":"Belia","email":"Belia@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":11,"name":"Moses","email":"Moses@gmail.com","counts_of_visit":9,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":12,"name":"Alex","email":"Alex@gmail.com","counts_of_visit":7,"latest_time_of_visit":"2021-02-10T01:08:23.000Z","contacted":"Yes"},{"ID":13,"name":"Alix","email":"Alix@gmail.com","counts_of_visit":8,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"Yes"},{"ID":14,"name":"Wendell","email":"Wendell@gmail.com","counts_of_visit":2,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"},{"ID":15,"name":"Ceola","email":"Ceola@gmail.com","counts_of_visit":5,"latest_time_of_visit":"2021-03-12T12:08:23.000Z","contacted":"No"}];


const Table = () => {
  const [counterCount, setCounterCount] = React.useState(3);
  const [customerList, setCustomerList] = React.useState(base_customerList);
  
  function sortCountCustomer() {
    const sortedCountCustomer = [...base_customerList];
    let sortCountVisit = counterCount;

    if (sortCountVisit === 3) {
      sortCountVisit = 1;
      setCounterCount(1);
    } else {
      sortCountVisit += 1;
      setCounterCount(sortCountVisit);
    }

    if (sortCountVisit < 3)
      sortedCountCustomer.sort(function (x, y) {
        if (sortCountVisit === 1) {
          return x.counts_of_visit - y.counts_of_visit;
        } else if (sortCountVisit === 2) {
          return y.counts_of_visit - x.counts_of_visit;
        }
      });
    
    setCustomerList(sortedCountCustomer);
  }
  
  return (<table>
    <thead>
      <tr>
        <th>Name</th>
        <th onClick={() => sortCountCustomer()}>
          Counts of Visit
        </th>
      </tr>
    </thead>
    <tbody>
      {customerList.map((c) => (
        <tr key={c.ID}>
          <td>{ c.name }</td>
          <td>{ c.counts_of_visit }</td>
        </tr>
      ))}
    </tbody>
  </table>);
};

const App = () => <Table />;
ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>