Блог

Код переднего плана

   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. Таким образом, первый щелчок возвращает список в порядке убывания, 2-й щелчок возвращает список в порядке возрастания, но 3-й щелчок не возвращает исходный список клиентов. как решить эту проблему.

 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>