如何設置回原來的 state React.js

Question

這是我的代碼沙盒代碼https://codesandbox.io/s/bold-lederberg-d2h508?file=/src/Components/Products/Products.js

單擊“默認”后，我希望將項目恢復為原始演示文稿，但我做不到

按價格排序有效，但默認選項給我帶來了問題

import React, { useState } from "react";
import Products from "./Components/Products/Products";
import SearchInput from "./Components/SearchInput/SearchInput";
import data from "./utils/data";

const App = () => {
  const [searchValue, setSearchValue] = useState("");
  const [productsInfo, setProductsInfo] = useState([]);

  const handleChange = (e) => {
    setSearchValue(e.target.value);
  };

  const selectedChangeFilter = (e) => {
    const { value } = e.target;
    if (value === "sporting goods") {
      const sportingGoods = data.filter(
        (product) => product.category === "Sporting Goods"
      );
      setProductsInfo(sportingGoods);
    }
    if (value === "electronics") {
      const electronicsGoods = data.filter(
        (product) => product.category === "Electronics"
      );
      setProductsInfo(electronicsGoods);
    }
    if (value === "lowest price") {
      const lowestPriceGoods = data.sort((el1, el2) =>
        el1.price.localeCompare(el2.price, undefined, { numeric: true })
      );
      setProductsInfo([...lowestPriceGoods]);
    }
    if (value === "highest price") {
      const highestPriceGoods = data.sort((el1, el2) =>
        el2.price.localeCompare(el1.price, undefined, { numeric: true })
      );
      setProductsInfo([...highestPriceGoods]);
    }
    if (value === "all") {
      setProductsInfo(data);
    }
  };

  const searchProducts = (products) => {
    if (searchValue.toLowerCase().trim() === "") {
      setProductsInfo(products);
    } else {
      const seekedItem = productsInfo.filter(
        (product) =>
          product.name.toLowerCase().trim().includes(searchValue) ||
          product.category.toLowerCase().trim().includes(searchValue)
      );
      setProductsInfo(seekedItem);
    }
  };

  return (
    <div>
      <SearchInput
        handleChange={handleChange}
        searchValue={searchValue}
        selectedChangeFilter={selectedChangeFilter}
      />
      <Products
        data={data}
        searchValue={searchValue}
        productsInfo={productsInfo}
        searchProducts={searchProducts}
      />
    </div>
  );
};
export default App;

我在下面嘗試了這個但不起作用

if (value === "all") {
const copiedData = [...data]
  setProductsInfo(copiedData);
}

Answer 1

這是因為在排序時，您正在對原始數據數組進行排序。 所以其中的項目排序發生了變化。 您可以將數據復制到單獨的數組中，然后進行排序，如下所示。

更新了 Codesandbox 鏈接 -https://codesandbox.io/s/fervent-napier-3rhvs4?file=/src/App.js

if (value === "lowest price") {
      const productsToSort = [...data]
      const lowestPriceGoods = productsToSort.sort((el1, el2) =>
        el1.price.localeCompare(el2.price, undefined, { numeric: true })
      );
      setProductsInfo([...lowestPriceGoods]);
    }
    if (value === "highest price") {
      const productsToSort = [...data]
      const highestPriceGoods = productsToSort.sort((el1, el2) =>
        el2.price.localeCompare(el1.price, undefined, { numeric: true })
      );
      setProductsInfo([...highestPriceGoods]);
    }

Answer 2

我認為這是因為 data.sort() 更改了您的 javascript 數據 object，並且不會返回像過濾器這樣的新數組。

嘗試將 data.sort() 替換為 [...data].sort()

const selectedChangeFilter = (e) => {
    const { value } = e.target;
    if (value === "sporting goods") {
      const sportingGoods = data.filter(
        (product) => product.category === "Sporting Goods"
      );
      setProductsInfo(sportingGoods);
    }
    if (value === "electronics") {
      const electronicsGoods = data.filter(
        (product) => product.category === "Electronics"
      );
      setProductsInfo(electronicsGoods);
    }
    if (value === "lowest price") {
      const lowestPriceGoods = [...data].sort((el1, el2) =>
        el1.price.localeCompare(el2.price, undefined, { numeric: true })
      );
      setProductsInfo([...lowestPriceGoods]);
    }
    if (value === "highest price") {
      const highestPriceGoods = [...data].sort((el1, el2) =>
        el2.price.localeCompare(el1.price, undefined, { numeric: true })
      );
      setProductsInfo([...highestPriceGoods]);
    }
    if (value === "all") {
      setProductsInfo(data);
    }
  };

Answer 3

這是因為 Array.sort() 方法是可變的。 您正在對數據數組進行排序並返回排序后的值。 這是正在發生的事情的一個簡短示例。

const fruits = ["Melon", "Avocado", "Apple"];

console.log(fruits)  // ["Melon", "Avocado", "Apple"]

fruits.sort()

console.log(fruits)  // [ 'Apple', 'Avocado', 'Melon' ]

為了避免在您的代碼中出現這種情況，您可以解構數據數組。 這將創建一個新數組，將其指向 memory 中的不同位置。

  const selectedChangeFilter = (e) => {
    const { value } = e.target;
    // { . . . }
    
    if (value === "lowest price") {
      const lowestPriceGoods = [...data].sort((el1, el2) =>
        el1.price.localeCompare(el2.price, undefined, { numeric: true })
      );
      setProductsInfo([...lowestPriceGoods]);
    }
    if (value === "highest price") {
      const highestPriceGoods = [...data].sort((el1, el2) =>
        el2.price.localeCompare(el1.price, undefined, { numeric: true })
      );
      setProductsInfo([...highestPriceGoods]);
    }

  //  { . . . }

}