Как обойти бессмысленную проверку array.filter?

Question

[miliko mikoyan]

У меня есть 2 входа для фильтрации arrProd (см. Код ниже). В функции FormSubmit я сначала проверяю, являются ли значения price.minPrice и price.maxPrice действительными числами, а не пустыми строками. После этих проверок могут быть только две опции: либо пользователь пишет и вводит цифры, либо оставляет поля пустыми. Затем я проверяю, начались ли числа, затем массив фильтруется. В цикле фильтрации бессмысленно проверять значение несколько раз. Как я могу сделать это, чтобы проверить это только один раз?

import React, { Fragment, useCallback, useState } from "react";
import ReactDOM from "react-dom";

const arrProd = [
  {
    price: "5.75",
    sold: "100"
  },
  {
    price: "2.36",
    sold: "15"
  },
  {
    price: "5.48",
    sold: "20"
  },
  {
    price: "4.49",
    sold: "200"
  },
  {
    price: "3.15",
    sold: "258"
  },
  {
    price: "9.99",
    sold: "479"
  },
  {
    price: "4.8",
    sold: "147"
  },
  {
    price: "8",
    sold: "951"
  },
  {
    price: "4.27",
    sold: "753"
  },
  {
    price: "2.46",
    sold: "852"
  },
  {
    price: "4.99",
    sold: "742"
  },
  {
    price: "3.49",
    sold: "10"
  },
  {
    price: "2",
    sold: "26"
  },
  {
    price: "3.83",
    sold: "39"
  },
  {
    price: "9.98",
    sold: "47"
  },
  {
    price: "6.77",
    sold: "96"
  }
];

function App() {
  const [price, setPrice] = useState({ maxPrice: "", minPrice: "" });
  const [sold, setSold] = useState("");
  const [processingProd, setProcessingProd] = useState([]);
  const [checkInput, setCheckInput] = useState({
    checkPrice: false,
    checkSold: false
  });

  const PriceMaxMin = useCallback(({ target: { value, name } }) => {
    name === "maxPrice"
      ? setPrice(({ minPrice }) => ({ maxPrice: value, minPrice }))
      : setPrice(({ maxPrice }) => ({ minPrice: value, maxPrice }));
  }, []);
  console.log(processingProd);
  const FormSubmit = event => {
    if (checkInput.checkPrice) setCheckInput({ checkPrice: false });
    const checkPrice =
      price.minPrice === "" && price.minPrice === ""
        ? "initial values"
        : +price.maxPrice >= +price.minPrice &&
          price.minPrice !== "" &&
          !Number.isNaN(+price.maxPrice) &&
          !Number.isNaN(+price.minPrice);
    const checkSold = sold === "" ? "initial values" : !Number.isNaN(+sold);

    if (!checkPrice || !checkSold) {
      setCheckInput({ checkPrice: !checkPrice, checkSold: !checkSold });
      return false;
    }

    const x = arrProd.filter(prod => {
      const filterPrice =
        checkPrice === "initial values"
          ? true
          : +prod.price > +price.minPrice && +prod.price < +price.maxPrice;
      const filterSold =
        checkSold === "initial values" ? true : +sold >= +prod.sold;

      return filterPrice && filterSold;
    });
    setProcessingProd(x);
    event.preventDefault();
  };

  return (
    <Fragment>
      <form onSubmit={FormSubmit}>
        {checkInput.checkPrice && (
          <div>{"Please provide a valid price range"}</div>
        )}
        {"Min"}
        <input
          type={"text"}
          name={"minPrice"}
          size={6}
          maxLength={10}
          value={price.minPrice}
          onChange={PriceMaxMin}
        />
        {"Max"}
        <input
          type={"text"}
          name={"maxPrice"}
          size={6}
          maxLength={10}
          value={price.maxPrice}
          onChange={PriceMaxMin}
        />
        {checkInput.checkSold && (
          <div>{"Please provide a valid price range"}</div>
        )}
        {"Sold"}
        <input
          type={"text"}
          name={"minPrice"}
          size={6}
          maxLength={10}
          value={sold}
          onChange={({ target: { value, name } }) => setSold(value)}
        />
        <input type="submit" title={"Submit price range"} value={"Go"} />
      </form>
    </Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

[Антон Спирин]

spoiler

import React, { Fragment, useCallback, useState } from "react";
import ReactDOM from "react-dom";

const arrProd = [
  {
    price: "5.75",
    sold: "100"
  },
  {
    price: "2.36",
    sold: "15"
  },
  {
    price: "5.48",
    sold: "20"
  },
  {
    price: "4.49",
    sold: "200"
  },
  {
    price: "3.15",
    sold: "258"
  },
  {
    price: "9.99",
    sold: "479"
  },
  {
    price: "4.8",
    sold: "147"
  },
  {
    price: "8",
    sold: "951"
  },
  {
    price: "4.27",
    sold: "753"
  },
  {
    price: "2.46",
    sold: "852"
  },
  {
    price: "4.99",
    sold: "742"
  },
  {
    price: "3.49",
    sold: "10"
  },
  {
    price: "2",
    sold: "26"
  },
  {
    price: "3.83",
    sold: "39"
  },
  {
    price: "9.98",
    sold: "47"
  },
  {
    price: "6.77",
    sold: "96"
  }
];

function App() {
  const [form, setForm] = useState({
    minPrice: "",
    maxPrice: "",
    sold: ""
  });

  const { minPrice, maxPrice, sold } = form;

  const [products, setProducts] = useState(arrProd);

  const handleChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(f => ({ ...f, [name]: value }));
  }, []);

  const handleSubmit = useCallback(
    e => {
      e.preventDefault();

      const filteredProducts = arrProd.filter(
        product =>
          (!maxPrice || +maxPrice >= +product.price) &&
          (!minPrice || +minPrice <= +product.price) &&
          (!sold || +sold >= +product.sold)
      );

      setProducts(filteredProducts);
    },
    [minPrice, maxPrice, sold]
  );

  const isPriceRangeValid = !minPrice || !maxPrice || +minPrice <= +maxPrice;
  const isSoldValid = +sold >= 0;

  return (
    <Fragment>
      <form onSubmit={handleSubmit}>
        {!isPriceRangeValid && <div>"Please provide a valid price range"</div>}
        Min
        <input
          type="text"
          name="minPrice"
          size={6}
          maxLength={10}
          value={minPrice}
          onChange={handleChange}
        />
        Max
        <input
          type="text"
          name="maxPrice"
          size={6}
          maxLength={10}
          value={maxPrice}
          onChange={handleChange}
        />
        {!isSoldValid && <div>Please provide a valid sold value</div>}
        Sold
        <input
          type="text"
          name="sold"
          size={6}
          maxLength={10}
          value={sold}
          onChange={handleChange}
        />
        <input type="submit" title={"Submit price range"} value={"Go"} />
      </form>
      <ul>
        {products.map((product, i) => (
          <li key={product.sold + i}>
            {product.price} - {product.sold}
          </li>
        ))}
      </ul>
    </Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Проверки на валидность просто для демонстрации.

Comments

[Антон Спирин]

miliko mikoyan, а ну все как я писал. К числам надо приводить:

const filteredProducts = arrProd.filter(
  product =>
    (!maxPrice || +maxPrice >= +product.price) &&
    (!minPrice || +minPrice <= +product.price) &&
    (!sold || +sold >= +product.sold)
  );

Демо.

[miliko mikoyan]

как ты коротко написал .Спасибо