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

Question

所以我有 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];

codeSandBox 的链接： SandBox

Answer 1

我为几个类型添加了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>
  );
};