映射两个数组并在 Javascript(React) 中进行比较答案

【问题标题】：Map two arrays and compare in Javascript(React)映射两个数组并在 Javascript(React) 中进行比较
【发布时间】：2021-09-23 04:54:59
【问题描述】：

我建了一个表格，但它的列太长，我被要求创建一个复选框组，用户可以在其中对他或她想要查看的列进行排序。他可以取消选中任何复选框以隐藏特定列并选中以显示。

假设这是我的表格列数组：

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"];

我只想要 column 那些匹配 selectedOnes

【问题讨论】：

看看array.find()

标签： javascript arrays reactjs sorting

【解决方案1】：

我认为您正在尝试动态过滤表中的列。

下面的代码会对你有所帮助。

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案3】：

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

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

【讨论】：