Json 如何在reactJS的详细信息页面中显示相关项目

我在index.js中有以下代码，可以从json文件中删除所有员工信息。--代码沙盒---

---

在详细信息页面中使用筛选器按部门进行筛选，并仅显示该部门中的ePloyee

const relatedTo = cardData.data.Table.filter(
  item => item.Department === data.Department && item.id !== data.id
);

在Details.js呈现方法中，将代码更改为以下内容

render() {

  const id = this.props.match.params.id;
  const data = cardData.data.Table.find(item => item.id === id);

  const relatedTo = cardData.data.Table.filter(
    item => item.Department === data.Department && item.id !== data.id
  );

  return (
    // Card details compoment
    <div className="card-details">
      <h2>{data.first_name}</h2>
      <h2>{data.id}</h2>

      <h3>Works with: </h3>
      {relatedTo &&
        relatedTo.map(emp => (
          <div>
            <h4>{emp.first_name}</h4>
            <h4>{emp.id}</h4>
          </div>
        ))}

      <Link
        to={{
          pathname: "/",
          state: this.props.location.state
        }}
      >
        <button>Return to list</button>
      </Link>
    </div>
  );
}

render（）{
const id=this.props.match.params.id；
const data=cardData.data.Table.find（item=>item.id==id）；
const relatedTo=cardData.data.Table.filter(
item=>item.Department==data.Department&&item.id！==data.id
);
返回(
//卡片详细信息组件
{data.first_name}
{data.id}
与以下机构合作：
{有关&&
relatedTo.map（emp=>(
{emp.first_name}
{emp.id}
))}
返回列表
);
}

按部门分组？@Kuku是否希望同一部门的所有员工都列在一个列表中？@VahidAkhtar是的，我将使用旋转木马部门作为路径参数，而不是员工Id。@JuniusL。你没有得到我想要完成的东西我希望详细信息页面是通过ID选择的员工信息，但我想在页面底部显示与同一页面相关的员工，他们共享同一部门或同一主管，诸如此类，就像当你购买物品时，你会看到相关的物品Hanks我在哪里可以添加和显示它？在details.js组件渲染中，我将粘贴代码。demo欢迎你，记住向列表中添加键Junius可以检查这个

"data": {
    "Table": [
      {
        "id": "1001",
        "first_name": "Alez",
        "Department": "IT"
      },
      {
        "id": "1002",
        "first_name": "Baro",
        "Department": "Accounting"
      },
      {
        "id": "1003",
        "first_name": "Tata",
        "Department": "IT"
      },

const relatedTo = cardData.data.Table.filter(
  item => item.Department === data.Department && item.id !== data.id
);

render() {

  const id = this.props.match.params.id;
  const data = cardData.data.Table.find(item => item.id === id);

  const relatedTo = cardData.data.Table.filter(
    item => item.Department === data.Department && item.id !== data.id
  );

  return (
    // Card details compoment
    <div className="card-details">
      <h2>{data.first_name}</h2>
      <h2>{data.id}</h2>

      <h3>Works with: </h3>
      {relatedTo &&
        relatedTo.map(emp => (
          <div>
            <h4>{emp.first_name}</h4>
            <h4>{emp.id}</h4>
          </div>
        ))}

      <Link
        to={{
          pathname: "/",
          state: this.props.location.state
        }}
      >
        <button>Return to list</button>
      </Link>
    </div>
  );
}