React JS - 基于多个复选框值的过滤

Question

我有一个简单的 React 应用程序，如下所示：

import { useState } from "react";

const initialState = [
  { id: 1, language: "javascript" },
  { id: 2, language: "java" },
  { id: 3, language: "python" },
  { id: 4, language: "python" },
  { id: 5, language: "javascript" },
  { id: 6, language: "javascript" },
];

function App() {
  const [items, setItems] = useState(initialState);

  const [languages, setLanguages] = useState({
    javascript: false,
    java: false,
    python: false,
  });

  const onChange = (e) => {
    setLanguages({ ...languages, [e.target.value]: e.target.checked });
  };

  return (
    <>
      <div>
        <label>
          <input
            type="checkbox"
            value="javascript"
            name="language"
            checked={languages.javascript}
            onChange={onChange}
          />
          javascript
        </label>

        <label>
          <input
            type="checkbox"
            value="java"
            name="language"
            checked={languages.java}
            onChange={onChange}
          />
          java
        </label>

        <label>
          <input
            type="checkbox"
            value="python"
            name="language"
            checked={languages.python}
            onChange={onChange}
          />
          python
        </label>
      </div>

      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.language}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

我现在正在尝试实现过滤，但还没有成功。如何根据所有选中的值过滤和呈现显示的 items，以便每次复选框值更改时更新列表项？请参阅下面的预期行为。

示例 1

州：

const [languages, setLanguages] = useState({
  javascript: true,
  java: false,
  python: false,
});

输出：

<ul>
  <li>javascript</li>
  <li>javascript</li>
  <li>javascript</li>
</ul>

示例 2

州：

const [languages, setLanguages] = useState({
  javascript: true,
  java: false,
  python: true,
});

输出：

<ul>
  <li>javascript</li>
  <li>python</li>
  <li>python</li>
  <li>javascript</li>
  <li>javascript</li>
</ul>

Answer 1

您可以像下面这样在 ul 中渲染项目时简单地应用过滤器

<ul>
    {items.filter(x => languages[x.language]).map((item) => (
      <li key={item.id}>{item.language}</li>
    ))}
</ul>

React JS - 基于多个复选框值的过滤

React JS - filtering based on multiple checkbox values

javascript

mapping

checkbox

filter

reactjs

示例 1

示例 2