时间戳

首页 > 解决方案 > 将 2 个数组合并为 1 个数组并过滤这个合并的数组，

arrays - 将 2 个数组合并为 1 个数组并过滤这个合并的数组，

问题描述

所以我有 2 个对象数组：计划的，积压的。

    const planned = [
     {
      order_number: "1",
      part_name: "example",
      part_number: "1",
      process_id: 1
     },
     ....
    ];
    const backlog = [
     {
      order_number: "2",
      part_name: "example",
      part_number: "2",
      process_id: 2
     },
     ....
    ];

我试图同时过滤它们，每一个都不是问题。

所以我实际上在做的是首先将计划的键添加到计划的数组和积压到积压数组，以便以后知道订单最初来自哪里。

var newPlanned = planned.map(function (el) {
  var o = Object.assign({}, el);
  o.planned = true;
  return o;
});

var newBacklog = backlog.map(function (el) {
  var o = Object.assign({}, el);
  o.backlog = true;
  return o;
});

后来我将 2 个数组合并为 1 个数组，并用一个输入 onChange 过滤合并的数组，但我无法实现的是与新的合并数组分开渲染“计划”和“积压”数组。

const newPlannedAndBacklog = [...newBacklog, ...newPlanned];

链接代码沙盒：沙 盒

标签： arraysreactjsfilterreact-hooks

解决方案

我为几种类型添加了一个type而不是布尔属性。这可能更具可扩展性，因此您可以添加更多类型（refined、done 等），但如果您想要布尔属性，请告诉我。

const combinedList = [
  ...planned.map((item) => ({ ...item, type: 'planned' })),
  ...backlog.map((item) => ({ ...item, type: 'backlog' })),
];

const getFilteredList = (type) => combinedList.filter((item) => item.type === type);

更新

我相信这是你想要的行为。如果没有，请告诉我，我会更新答案。

// Combines all backlog and planned stories into one array
const newPlannedAndBacklog = [
  ...planned.map((item) => ({ ...item, type: 'planned' })),
  ...backlog.map((item) => ({ ...item, type: 'backlog' })),
];

// Filters property values based on input value
const getFilteredList = (filter) => newPlannedAndBacklog
  .filter(item => Object
    .values(item)
    .map(String)
    .some(v => v.includes(filter))
  );

export default function App() {
  const [form, setForm] = useState({});
  const [stories, setStories] = useState([]);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setForm({ [name]: value });
    setStories(getFilteredList(value));
  };

  // Separates the return of getfilteredList based on type
  const renderDiv = (type) => stories
    .filter((story) => story.type === type)
    .map((story) => {

      // Render each property individually:
      return Object.entries(story).map(([key, value]) => {
        const content = <>{key}: {value}</>;

        if (key === 'order_number') return <h3>{content}</h3>;
        return <p>{content}</p>;
      });
  });

  return (
    <div className="App">
      <h2>PlannedAndBacklog</h2>
      <p>Search for planned and backlog:</p>
      <input
        name='type'
        onChange={handleChange}
        value={form.type || ''}
      />
      <div>{renderDiv('backlog')}</div>
      <div>{renderDiv('planned')}</div>
    </div>
  );
};

推荐阅读