映射兩個數組並在 Javascript(React) 中進行比較

Question

我建立了一個表格，它的列太長，我被要求創建一個復選框組，用戶可以在其中對他或她想要查看的列進行排序。 他可以取消選中任何復選框以隱藏特定列並選中以顯示。

比方說，這是我的表列數組：

const column = [
 {
  key: '123',
  title: 'column_a',
 },
 {
  key: '234',
  title: 'column_b',
 },
 {
  key: '345',
  title: 'column_c',
 },
 {
  key: '567',
  title: 'column_d',
 }
]

我以在更改時返回數組的方式創建了復選框組，如下所示：

const selectedOnes = ["column_b", "column_c"];

我只想要那些匹配selectedOnes的column

Answer 1

要查找選定的列，您可以使用它

const filteredColumns = (columns, selectedColumns)=>{
  return columns.filter(column => selectedColumns.includes(column.title))
}

Answer 2

你在看這樣匹配的數組嗎

 const column = [ { key: '123', title: 'column_a', }, { key: '234', title: 'column_b', }, { key: '345', title: 'column_c', }, { key: '567', title: 'column_d', } ] const selectedOnes = ["column_b", "column_c"]; const result = column.filter(col => { return selectedOnes.find(selected=> selected === col.title) }) console.log(result);

Answer 3

我認為您正在嘗試動態過濾表中的列。

下面的代碼會幫助你。

import { useState } from "react";
import "./styles.css";

function removeValFromArray(array, item) {
  return array.filter((f) => f !== item);
}

export default function App() {
  const [selectedColumns, setSelctedColumns] = useState([]);

  function onHandler(col, checked) {
    if (checked) {
      if (!selectedColumns.includes(col)) {
        setSelctedColumns([...selectedColumns, col]);
      }
    } else {
      let temp = removeValFromArray(selectedColumns, col);
      setSelctedColumns(temp);
    }
  }

  return (
    <div className="App">
      <form>
        <label>One</label>
        <input
          type="checkbox"
          value="One"
          checked={selectedColumns.includes("One")}
          onChange={(e) => {
            onHandler(e.target.value, e.target.checked);
          }}
        />
        <label>Two</label>
        <input
          type="checkbox"
          value="Two"
          checked={selectedColumns.includes("Two")}
          onChange={(e) => {
            onHandler(e.target.value, e.target.checked);
          }}
        />
        <label>Three</label>
        <input
          type="checkbox"
          value="Three"
          checked={selectedColumns.includes("Three")}
          onChange={(e) => {
            onHandler(e.target.value, e.target.checked);
          }}
        />
      </form>
      <br />
      <h3>Selected Columns</h3>
      <ul>
        {selectedColumns.map((col) => {
          return <li>{col}</li>;
        })}
      </ul>
    </div>
  );
}

演示 - https://codesandbox.io/embed/nervous-wind-s0htq?fontsize=14&hidenavigation=1&theme=dark