时间戳

首页 > 解决方案 > 如何根据条件对列表进行排序？

reactjs - 如何根据条件对列表进行排序？

问题描述

我有两个表，第一个存储公司，第二个存储这些公司的订单，但是如果您为特定公司创建订单，然后从公司列表中删除该公司，则会出现错误。如何只显示那些与现有公司一致的订单，即如果没有公司，则没有订单。

现在我正在尝试做这样的事情，但我不明白接下来会发生什么......

import React from "react";
import "./styles.css";

export default function App() {
  const arr1 = {
    company: [
      {
        id: "random1",
        companyName: "Apple"
      }
    ]
  };

  const arr2 = {
    projects: [
      {
        id: "random1",
        companyName: "Apple",
        descProjects: "Desc1"
      },
      {
        id: "random2",
        companyName: "Samsung",
        descProjects: "Desc2"
      }
    ]
  };

  const blockCreate = () => {
    return arr1.company.map(item => {
      const projects = arr2.projects.filter(i => {
        return i.companyName === item.companyName;
      });

      return (
        <p>
          <span>ID {item.id} - </span>
          <br />
          {item.companyName}
        </p>
      );
    });
  };

  return (
    <div className="App">
      <div>{blockCreate()}</div>
    </div>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： reactjs

解决方案

您必须在映射第二个数组之前对其进行过滤。

你可以尝试这样的事情：

const companies = arr1.company.map(company => company.companyName); // ["Apple", "Microsoft", ...]
const projects = arr2.projects.filter(project => companies.includes(project.companyName));

projects.map(project => (
   <p>
     <span>ID {project.id} - </span>
     <br />
     {project.companyName}
   </p>
))

推荐阅读