如何在第三次点击时返回我的原始列表？

Question

前端代码

  const [customerList, setCustomerList] = useState([]); //store all that information of the database in a list
  //make an axios request to get information from database
  useEffect(() => {
    Axios.get("http://localhost:3001/customers").then((response) => {
      setCustomerList(response.data);
    });
  }, []);
//sort function final
  const [counter, setCounter] = useState(0);
  const [sortedCustomerList, setSortedCustomerList] = useState([]);

  function sortCustomer() {
    const sortedCustomer = [...customerList];
    let sortCount = counter;
    //check the current sortCount, if it is 3 then go back to 1, if not then increase by 1
    if (sortCount === 3) {
      sortCount = 1;
      setCounter(1);
    } else {
      sortCount += 1;
      setCounter(sortCount);
    }
    console.log(sortCount);
    if (sortCount < 3) {
      sortedCustomer.sort(function (x, y) {
        if (sortCount === 1) {
          return x.contacted === y.contacted
            ? 0
            : x.contacted === "Yes"
            ? -1
            : 1;
        } else if (sortCount === 2) {
          return x.contacted === y.contacted
            ? 0
            : x.contacted === "Yes"
            ? 1
            : -1;
        }
      });

      setCustomerList(sortedCustomer);
    } else {
      setCustomerList(customerList);
    }
  }
<th onClick={() => sortCustomer()}>Contacted?</th>

我已经实现了一个排序函数 onClick 方法。所以第一次点击返回降序列表，第二次点击返回升序列表，但第三次点击不返回原来的customerList。如何解决这个问题。

Answer 1

const [customerList, setCustomerList] = useState([]); //store all that information of the database in a list
const [counter, setCounter] = useState(0);
const [sortedCustomerList, setSortedCustomerList] = useState([]);
useEffect(() => {
    Axios.get("http://localhost:3001/customers").then((response) => {
        setCustomerList(response.data);
        setSortedCustomerList(response.data);
    });
}, []);

function sortCustomer() {
    const sortedCustomer = [...customerList];
    let sortCount = counter;
    if (sortCount === 3) {
        sortCount = 1;
        setCounter(1);
    } else {
        sortCount += 1;
        setCounter(sortCount);
    }

    if (sortCount < 3) {
        sortedCustomer.sort(function (x, y) {
        if (sortCount === 1) {
            return x.contacted === y.contacted
            ? 0
            : x.contacted === "Yes"
            ? -1
            : 1;
        } else if (sortCount === 2) {
            return x.contacted === y.contacted
            ? 0
            : x.contacted === "Yes"
            ? 1
            : -1;
        }
        });
        setSortedCustomerList(sortedCustomer);
    } else {
        setSortedCustomerList(customerList);
    }
}

Use sortedCustomerList to print on the screen

<th onClick={() => sortCustomer()}>Contacted?</th>