Question

我在index.js中有以下代码，该代码将从json文件中提取所有员工信息。 --- codeandbox Code ---

return (
      <div className="App">
        <input
          value={this.state.input}
          type="text"
          onChange={e => this.onSearchTextChange(e.target.value)}
        />
        <List divided>
          {cardData.data.Table.map(results => (
              <div class="body">
                  <h3 className="title">{results.first_name}</h3>
                  <div className="row">
                    <div className="col-md-3 col-sm-6">
                      {" "}
                      Department: {results.Department}
                    </div>
                  </div>
                  {/* row for Location cubicle Prof  */}

                  <Link
                    to={{ pathname: `/cards/${results.id}`, state: results }}
                    className={`card-wrapper restore-${results.id}`}
                  >
                    display
                  </Link>
                </div>
          ))}
        </List>
       </div>
    );

我也有details.js文件，该文件显示了如下选定的员工详细信息

render() {
    const id = this.props.match.params.id;
    const data = cardData.data.Table.find(item => item.id === id);
    return (
      // Card details compoment
      <div className="card-details">
        <h2>{data.first_name}</h2>
        <h2>{data.id}</h2>

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

如何在所选记录详细信息页面中以相同的部门名称显示员工？我有数据，我有一个数据，如下所示的员工1001详细信息页面上，我想显示ID为1003的员工的Id和first_name，因为两者都在同一部门

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

Answer 1

在您的详细信息页面中使用过滤器按部门进行过滤，并且仅显示该部门中的员工。

shell_exec("mummer -mum '$ref_dest' '$sub_dest' > output.txt 2> err.txt");

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

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

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

1 个答案: