javascript - 匹配来自两个 api 调用的数据，然后在 React 中的表格上显示结果

Question

我的应用程序中目前有两张表，一张用于部门，一张用于员工。部门不与员工互动，但员工需要与部门互动。每个部门都有一个唯一的 ID，该 ID 在创建该部门时生成。根据部门的不同，员工也会被分配到该部门。我使用 useEffect 将员工和部门带入 Employee 组件

 useEffect(() => {
    if (employees.length === 0) {
      getEmployees();
      getDepts();
    }
  }, [employees.length, getDepts, getEmployees]);

getEmployees 和 getDepts 是对 firestore 的 api 调用。然后我将这些值传递给表

     <EmployeeTable
              cat1={"Employee"}
              cat2={"Department"}
              cat3={"Status"}
              data={employees}
              departments={departments}
              setEdit={setDepartment}
              openEdit={setOpenEdit}
            />

然后我映射过滤后的结果

 filteredResults.map(data => {
  return (
   <tr key={data.id}>
    <td className="normalView">
     {data.default_department_id ? 
      data.default_department_id : "--None--"}
    </td>
   </tr>
 })

上面的代码输出default_department_id 但我不确定如何过滤部门和员工编号以匹配 ID 并输出适当的部门名称

迄今为止我所得到的最接近的

  function getDeptId(employees) {
    var matchedDept = departments.filter(
      data => data.uid === employees.default_department_id
    );
    var namedDept = matchedDept.map(resp => {
      return resp.name;
    });
    console.log(namedDept);
  }

部门数据传递为

adj_promised_time: 0
adjust_hours: 1
audit_inv: 0
auto_logout: 1
close_day: 1
close_till: 1
combine_orders: 0
comp: 1
create_till: 1
deleted: 0
delivery_module: 1
dispatch_others: 1
dispatch_self: 1
drop_till: 0
edit_customer: 1
expanded: false
id: "022af185-3d51-4d04-a3b2-d7e32aa49ff6"
manager_module: 0
name: ""
no_sale: 1
no_sale_reason: 1
paid_in: 0
paid_out: 1
payments: 1
receive_inv: 0
refund: 1
refund_reason: 1
reopen_order: 1
reports_module: 0
require_manager_break: 0
require_manager_shift: 0
return_orders: 1
sales_data: 0
schedule_module: 0
security_level: 0
split_orders: 0
status: true
uid: "72bf07f8-0ae2-474a-b9b3-4386528b17b1"
void_order: 0
void_reason: 0
waste_inv: 0
workstations_module: 1

传递员工数据时

address_1: ""
address_2: ""
cell_phone: ""
city: ""
default_department: false
default_department_id: "f16e439a-a240-4e41-9478-df371c251765"
default_rate: 0
deleted: 0
dob: 0
email: ""
emergency_contact: ""
emergency_phone: ""
ext: ""
first_name: "Noah"
hire_date: 0
home_phone: ""
id: "03ba8208-9217-11e9-83a2-992fd1181634"
image: ""
insurance_carrier: ""
insurance_exp: 0
insurance_phone: ""
insurance_policy_no: ""
internal_id: ""
last_name: "Lowery"
last_raise_date: 0
middle_init: "T"
notes: ""
payment_type: "hourly"
payroll_id: ""
pin: "7364"
review_date: 0
salary_pay: 0
state: "NY"
status: true
termination_date: 0
timestamp: 1562959593
title: ""
use_delivery_pay: 0
use_hourly_after: 40
zip: "10013"

Answer 1

departments.map(dept => {
return (
    <div>
        <h1>All of the employees at {dept.name} department</h1>
    {employees.map(employee => {
        return employee.default_department_id === dept.uid ? <p>{employee.first_name} works at {dept.name}</p> : ""
    })}
    </div>
)
})

不确定您是否试图在 map 中对它们进行排序，但如果我理解正确的话，这应该可以解决问题。

或者，如果您通过filteredEmployees进行过滤。

filteredEmployees.map(employee => {
const worksAt = departments.find(dept => dept.uid === employee.default_department_id)
return (
    <div>
        My name is {employee.first_name} and I work at {worksAt.name}
    </div>
)
})