如何將價格最高的陣列顯示到最低

我已連接到一個 api，并將一些名為“資料”的資料提取到我的專案中。此資料正在動態呈現到卡片組件中。我現在正在嘗試通過單擊帶有 useState 的按鈕來安排從最高價格到最低價格的訂單，但無法弄清楚。以下是我到目前為止的內容：

import React, { useState } from "react";
import "./App.scss";
import { useQuery } from "@apollo/react-hooks";
import GET_PRODUCTS_IN_COLLECTION from "./gql/getCollection";
import ProductCard from "./components/ProductCard/ProductCard";

const App = (props) => {
  const { data, loading, error } = useQuery(GET_PRODUCTS_IN_COLLECTION, {
    variables: {
      count: 10,
      handle: "skateboard",
    },
  });

  // console.log(data)

  const [reversed, setReversed] = useState(false);
  const [highLow, setHighLow] = useState(false);
  const [lowHigh, setLowHigh] = useState(false);
  const [remove, setRemove] = useState(false);

  const reverseOrder = () => {
    setReversed(!reversed);
  };

  const highToLow = () => {
    setHighLow(!highLow);
  };

  const lowToHigh = () => {
    setLowHigh(!lowHigh);
  };

  const removeLast = () => {
    setRemove(!remove);
  };

  if (loading) {
    // Data is still loading....
    return <div className="App">Loading....</div>;
  }

  return (
    <div className="App">
      <header className="App-header"></header>
      <main>
        <div className="buttonGroup">
          <button onClick={reverseOrder}>Reverse Product Order</button>
          <button onClick={highToLow}>Price High to Low</button>
          <button onClick={lowToHigh}>Price Low to High</button>
          <button onClick={removeLast}>Display 9 products</button>
        </div>

        {/* 
          Your render components go here
        */}

        <div className="ProductList">
          {reversed
            ? data.collectionByHandle.products.edges
                .slice()
                .reverse()
                .map((product) => {
                  return <ProductCard productData={product} />;
                })
            : highLow
            ? data.collectionByHandle.products.edges
                .slice()
                .sort((a,b) => (a.node.vendor - b.node.vendor))
                .map((product) => {
                  return <ProductCard productData={product} />;
                })
            : lowHigh
            ? data.collectionByHandle.products.edges
                .slice()
                .map((product) => {
                  return <ProductCard productData={product} />;
                })
                .splice(1)
            : remove
            ? data.collectionByHandle.products.edges
                .slice()
                .map((product) => {
                  return <ProductCard productData={product} />;
                })
                .splice(1)
            : data.collectionByHandle.products.edges.map((product) => {
                return <ProductCard productData={product} />;
              })}
        </div>
      </main>
    </div>
  );
};

export default App;

陣列影像

uj5u.com熱心網友回復：

您可以更改代碼，如下例所示：

要記住的幾點：

1. 盡量避免 JSX 中的 if 陳述句。
2. 將您的活動放在單獨的功能中，以便您管理。

import React, { useState ,useEffect} from "react";
import "./App.scss";
import { useQuery } from "@apollo/react-hooks";
import GET_PRODUCTS_IN_COLLECTION from "./gql/getCollection";
import ProductCard from "./components/ProductCard/ProductCard";

const App = (props) => {

  const [myData, setMyData] = useState(data);

 useEffect (() => {
 const { data, loading, error } = useQuery(GET_PRODUCTS_IN_COLLECTION, 
  {
    variables: {
      count: 10,
      handle: "skateboard",
    },
  });

    setMyData(data);
  },[]);

  

    const reverseOrder = () => {
    let newData = myData.reverse();
    setMyData([...newData]);
  };

  const highToLow = () => {
    let newData = myData.sort((a, b) => b.node.vendor- a.node.vendor);
    setMyData([...newData]);
  };

  const lowToHigh = () => {
    let newData = myData.sort((a, b) => a.node.vendor- b.node.vendor);
    setMyData([...newData]);
  };

  const removeLast = () => {
    myData.splice(-1, 1);
    setMyData([...myData]);
  };

  if (loading) {
    // Data is still loading....
    return <div className="App">Loading....</div>;
  }

  return (
    <div className="App">
      <header className="App-header"></header>
      <main>
        <div className="buttonGroup">
          <button onClick={reverseOrder}>Reverse Product Order</button>
          <button onClick={highToLow}>Price High to Low</button>
          <button onClick={lowToHigh}>Price Low to High</button>
          <button onClick={removeLast}>Display 9 products</button>
        </div>

  {
    myData.map((product) => {
            return <ProductCard productData={product} />;
    });
   }
      
        </div>
      </main>
    </div>
  );
};

export default App;

uj5u.com熱心網友回復：

假設這些值是字母數字 javascript 已經內置了函式“sort”來做到這一點。即使它們不是數字，也必須有一種方法可以讀取您可以使用的值！然后它非常簡單（從 w3schools 修改）：

const fruits = [2,1,"Banana", "Orange", "Apple", "Mango"];
fruits.sort();

將創建陣列 [1,2,Apple,Banana,Mango,Orange]

你應該能夠在你的程式中按照這些思路做一些事情。

（只是下降：如果你想顛倒順序，只需在陣列上使用 reverse() 方法）

uj5u.com熱心網友回復：

我不知道您的資料是什么樣的，但這應該可以。

https://www.w3schools.com/js/js_array_sort.asp

標籤：javascript 数组 反应 功能 排序

上一篇：如何使用隨機破壞關系的比較器進行排序？

下一篇：在R中編輯行和列