reactjs - 如何使用 React 有条件地渲染来自 2 个数据源的数据

Question

我正在从两个 JSON 文件中渲染数据。第一个文件是我的主文件，从第二个文件我想在第一个文件的基础上进行条件渲染。
说明:从第一个文件名“maindata.json”，我将所有数据渲染到一个表中。第一个文件的 Json 中有一个唯一 id 字段。从第二个文件我只想填充一个 date field还有一个unique id在第二个 JSON 中。我想要的是，如果主 JSon 文件 id 与第二个 json 文件中的 id 匹配，那么在主文件中的 id 旁边的同一行中打印第二个文件中的日期。
我做了什么。

我已经应用了条件，但问题是它没有进行匹配并将所有日期打印在一列中。

React App 越来越慢(性能问题)

这是我的代码示例。

    import React, { Component } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import data from "./data/maindata.json";
import data1 from "./data/data2.json";

class PenApprovals extends Component {

  render() {

    return (
      <div className="container-fluid" style={{ backgroundColor: '#f7f7f7' }}>
        <table id="table-to-xls" className="table table-responsive table-striped display nowrap"  >
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">Date</th>
              <th scope="col">Status</th>
              <th scope="col">Name</th>
            </tr>
          </thead>
          <tbody>
            {data.map((record) => (
              <tr>
                <td>{record.UniqueName}</td>
                <td>
                  {data1.map((item) =>
                    <React.Fragment>
                     //Here fetching date from second file
                      {item.uniqueName === <span>{record.UniqueName}</span> ? <span> 
                      {item.assignedDate}</span> : "NO Match Found" }
                    </React.Fragment>
                  )}
                </td>
                <td>{record.Status }</td>
                <td>{record.Name}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}
export default PenApprovals;

这是 JSON 示例。
主数据文件

[
    {
        "UniqueName": "CR30876",
        "StatusString": "Submitted",
        "Name": "Pegasus Test 1"
    },
    {
        "UniqueName": "CR35876",
        "StatusString": "Submitted",
        "Name": "Pegasus Test 1"
    }
]

第二个条件 JSON 文件示例

[
    {
        "uniqueName": "CR35876",
        "assignedDate": "2020-11-09",
    },
    {
        "uniqueName": "CR34523",
        "assignedDate": "2020-11-09",
    }
  //More records....
]

谢谢大家。

Answer 1

您应该使用 filter而不是 map !这是有效的代码。

class PenApprovals extends Component {
  render() {
    return (
      <div className="container-fluid" style={{ backgroundColor: "#f7f7f7" }}>
        <table
          id="table-to-xls"
          className="table table-responsive table-striped display nowrap"
        >
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">Date</th>
              <th scope="col">Status</th>
              <th scope="col">Name</th>
            </tr>
          </thead>
          <tbody>
            {data.map((record) => {
              const tgt = data1.filter(
                (item) => item.uniqueName === record.UniqueName
              );
              return (
                <tr>
                  <td>{record.UniqueName}</td>
                  <td>
                    {tgt.length
                      ? tgt.map((item) => (
                          <React.Fragment key={item.uniqueName}>
                            <span>{item.assignedDate}</span>
                          </React.Fragment>
                        ))
                      : "NO Match Found"}
                  </td>
                  <td>{record.StatusString}</td>
                  <td>{record.Name}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}
export default PenApprovals;