如何在基于切換的反應狀態下添加/洗掉專案？

我需要根據復選框切換顯示產品。如果沒有切換，則陣列應該為空。如果切換男性復選框，則會顯示與男性相關的產品，女性復選框也是如此。如果兩者都被切換，將顯示兩個相關產品。當用戶切換男性或女性時，相應的產品會正確顯示/隱藏，但是當同時切換男性和女性并獲得大量與反應鍵相關的控制臺警告時，就會出現問題。這是我到目前為止所嘗試的。

const root = ReactDOM.createRoot(document.getElementById("root"))

const initialArray = [
  {
    title: "Belts",
    for: "men"
  },
  {
    title: "Makeup",
    for: "women"
  }
];

function App() {
  const [menToggle, setMenToggle] = React.useState(false);
  const [womenToggle, setWomenToggle] = React.useState(false);
  const [products, setProducts] = React.useState([]);

  React.useEffect(() => {
    if (menToggle) {
      setProducts((prev) => [
        ...prev,
        ...initialArray.filter((item) => item.for === "men")
      ]);
    }
    if (!menToggle) {
      setProducts((prev) => [...prev.filter((item) => item.for !== "men")]);
    }
    if (womenToggle) {
      setProducts((prev) => [
        ...prev,
        ...initialArray.filter((item) => item.for === "women")
      ]);
    }
    if (!womenToggle) {
      setProducts((prev) => [...prev.filter((item) => item.for !== "women")]);
    }
  }, [menToggle, womenToggle]);

  return (
    <div className="App">
      <label>
        <input
          type="checkbox"
          checked={menToggle}
          onChange={() => setMenToggle((prevValue) => !prevValue)}
        />
        Men
      </label>
      <label>
        <input
          type="checkbox"
          checked={womenToggle}
          onChange={() => setWomenToggle((prevValue) => !prevValue)}
        />
        Women
      </label>
      <div>
        {products &&
          products.length > 0 &&
          products.map((item) => <li key={item.title}>{item.title}</li>)}
      </div>
    </div>
  );
}


root.render(<App />)

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

提前致謝

uj5u.com熱心網友回復：

我認為您不需要在每次用戶更改活動過濾器時設定產品的狀態，因為您可以從狀態中獲取該值。此外，我更愿意創建一個活動過濾器串列，而不是讓每個過濾器處于單獨的狀態。這些過濾器往往會擴展，并且很難將它們分解。

我想出了兩種解決方案，一種是 using Array，一種是“更好”的 using Set。

Array：https ://codesandbox.io/s/sparkling-shape-in??evid

Set：https ://codesandbox.io/s/confident-paper-mdw44m

uj5u.com熱心網友回復：

const root = ReactDOM.createRoot(document.getElementById("root"))

const initialArray = [
  {
    title: "Belts",
    for: "men"
  },
  {
    title: "Makeup",
    for: "women"
  }
];

function App() {
  const [menToggle, setMenToggle] = React.useState(false);
  const [womenToggle, setWomenToggle] = React.useState(false);
  const [products, setProducts] = React.useState([]);

  React.useEffect(() => {
    if (menToggle) {
      setProducts((prev) => [
        ...prev,
        ...initialArray.filter((item) => item.for === "men")
      ]);
    }
    if (!menToggle) {
      setProducts((prev) => [...prev.filter((item) => item.for !== "men")]);
    }
    if (womenToggle) {
      setProducts((prev) => [
        ...prev,
        ...initialArray.filter((item) => item.for === "women")
      ]);
    }
    if (!womenToggle) {
      setProducts((prev) => [...prev.filter((item) => item.for !== "women")]);
    }
  }, [menToggle, womenToggle]);

  return (
    <div className="App">
      <label>
        <input
          type="checkbox"
          checked={menToggle}
          onChange={() => setMenToggle((prevValue) => !prevValue)}
        />
        Men
      </label>
      <label>
        <input
          type="checkbox"
          checked={womenToggle}
          onChange={() => setWomenToggle((prevValue) => !prevValue)}
        />
        Women
      </label>
      <div>
        {products &&
          products.length > 0 &&
          products.map((item) => <li key={item.title}>{item.title}</li>)}
      </div>
    </div>
  );
}


root.render(<App />)

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

標籤：javascript 反应

上一篇：即使狀態沒有改變，也反應渲染組件

下一篇：在MATLAB中繪制透明線