过滤一系列产品答案

【问题标题】：Filtering an array of products过滤一系列产品
【发布时间】：2021-09-02 16:09:06
【问题描述】：

我是新手，我尝试设置一个搜索引擎，根据我在输入中键入的值呈现产品。

使用下面的代码，我尝试了这种方式，但似乎我的逻辑不正确。有人可以通过我的代码检查一下，然后可以给我一些见解，拜托。

提前谢谢你。

import data from "./utils/data";

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

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

  return (
    <div>
      <SearchInput handleChange={handleChange} searchValue={searchValue} />
      <Products data={data} searchValue={searchValue} />
    </div>
  );
};


const SearchInput = ({ searchValue, handleChange }) => {
  return (
    <div>
      <input
        type="text"
        placeholder="Search specific item..."
        value={searchValue}
        onChange={handleChange}
      />
    </div>
  );
};

export default SearchInput;

    
function Products({ data, searchValue }) {
  const [productsInfo, setProductsInfo] = useState([]);

  useEffect(() => {
    filteredProducts(data);
  }, []);

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

  const productsData =
    productsInfo.length <= 0 ? (
      <div>Loading...</div>
    ) : (
      <div>
        {productsInfo.map((product, index) => {
          return (
            <div
              key={index}
              style={{ backgroundColor: "grey", maxWidth: "300px" }}
            >
              <h4>{product.name}</h4>
              <p>{product.category}</p>
              <p> {product.price} </p>
              <hr />
            </div>
          );
        })}
      </div>
    );

  return productsData;
}

export default Products;

const data = [
  {
    category: "Sporting Goods",
    price: "$49.99",
    stocked: true,
    name: "Football",
  },
  {
    category: "Sporting Goods",
    price: "$9.99",
    stocked: true,
    name: "Baseball",
  },
  {
    category: "Sporting Goods",
    price: "$29.99",
    stocked: false,
    name: "Basketball",
  },
  {
    category: "Electronics",
    price: "$99.99",
    stocked: true,
    name: "iPod Touch",
  },
  {
    category: "Electronics",
    price: "$399.99",
    stocked: false,
    name: "iPhone 5",
  },
  { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" },
];

export default data;

【问题讨论】：

标签： reactjs filter react-functional-component

【解决方案1】：

如果你在 useEffect 的第二个参数中返回空数组，这个函数只触发一次。试试看：

useEffect(() => {
filteredProducts(data);

  }, [searchValue]);

【讨论】：

【解决方案2】：

.includes 返回真或假 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)

试试看：

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

};

【讨论】：