reactjs 我需要在我的React.js电子商务应用程序中按名称和价格进行排序

lf3rwulv 于 2023-03-29 发布在 React

关注(0)|答案(1)|浏览(132)

我有一个电子商务应用程序与React.js，现在试图使排序的产品名称和价格（最低到最高和最高到最低）。我的产品是对象的关键字包括“名称”和“价格”。
我的代码如下：
App.js:

const [products, setProducts] = React.useState([
  { key: 1, name: "Airpods Pro", price: 79.99, image: "img/products/1.png" },
  { key: 2, name: "Hama Fun", price: 9.99, image: "img/products/2.jpg" },
  {
  key: 3,
  name: "Panasonic RP-HS46E",
  price: 19.99,
  image: "img/products/3.jpg",
  },
]);

return (
<div className="App">
  <Routes>
    <Route
      path="/"
      element={
        <Home
          products={products}
          addToCart={addToCart}
          addToFavorites={addToFavorites}
        />
      }
    />
    <Route path="/deals" element={<Deals deals={deals} />} />
    <Route path="/new" element={<New />} />
    <Route path="/account" element={<Account favorites={favorites} />} />
  </Routes>
</div>
);
}

Home.jsx:

const Home = ({ products, addToCart, addToFavorites,  }) => {
return (
 <>
  <TopBar />
  <Header />
  <div className="wrapper">
    <Hero />
    <Products products={products} addToCart={addToCart} addToFavorites={addToFavorites} />
  </div>
</>
);
};

Products.js:

export const Products = ({ products, addToCart, addToFavorites }) => {
return (
 <div className="products">
  <div className="top-block">
    <h1>Headphones For You!</h1>
    <select>
      <option value="Sort by" disabled>
        Sort by
      </option>
      <option value="Name">Name</option>
      <option value="Price: Lowest to highest">
        Price: Lowest to highest
      </option>
      <option value="Price: Highest to lowest">
        Price: Highest to lowest
      </option>
    </select>
  </div>
  <div className="products-card">
    {products.map((item) => (
      <Card
        key={item.key}
        cardKey={item.key}
        name={item.name}
        price={item.price}
        image={item.image}
        addToCart={(product) => addToCart(product)}
        addToFavorites={(product) => addToFavorites(product)}
      />
    ))}
  </div>
 </div>
 );
};

我需要将排序函数连接到选项。
先谢谢你的帮助。

reactjs

来源：https://stackoverflow.com/questions/75869541/i-need-to-make-sorting-by-name-and-price-in-my-react-js-e-commerce-application

1条答案

按热度按时间

bjg7j2ky1#

`try this one sorting with name same as sorting with price for exp`
   
export default function App() {
  const employees = [
    {price: 400, name: 'Dean'},
    {price: 300, name: 'Carl'},
    {price: 200, name: 'Bob'},
    {price: 100, name: 'Alice'},
    {price: 500, name: 'Ethan'},
  ];

   //ASSCENDING 

  const numAscending = [...employees].sort((a, b) => a.id - b.id);
  console.log(numAscending);

  // ------------------------------------------------

  //DESCENDING 

  const numDescending = [...employees].sort((a, b) => b.price - a.price);
  console.log(numDescending);

  // ------------------------------------------------

  // ASSENDING by name (A - Z)

  const strAscending = [...employees].sort((a, b) =>
    a.name > b.name ? 1 : -1,
  );
  console.log(strAscending);

  // ------------------------------------------------

  //  DESCENDING by name (Z - A)

  const strDescending = [...employees].sort((a, b) =>
    a.name > b.name ? -1 : 1,
  );
  console.log(strDescending);

  return (
    <div>
      {numAscending.map(employee => {
        return (
          <div key={employee.id}>
            <h2>id: {employee.id}</h2>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs 我需要在我的React.js电子商务应用程序中按名称和价格进行排序

1条答案

相关问题

热门标签

最新问答