我正在 React 中渲染来自两个 JSON 文件的数据。第一个文件是我的主文件,我想在第二个文件中基于第一个文件进行条件渲染。
说明:从第一个文件名“maindata.json”开始,我将所有数据渲染到表中。第一个文件的 Json 中有一个唯一的 id 字段。在第二个文件中,我只想填充一个日期字段
,并且第二个 JSON 中还有一个唯一 ID
。我想要的是,如果主 JSon 文件 id 与第二个 json 文件中的 id 匹配,则在主文件 id 旁边的同一行中打印第二个文件中的日期。
我做了什么。
- 我已经应用了条件,但问题是它没有进行匹配并将所有日期打印在一列中。
- React 应用程序变得越来越慢(性能问题)
这是我的代码示例。
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....
]
谢谢大家。
最佳答案
您应该使用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;
关于reactjs - 如何使用 React 有条件地渲染来自 2 个数据源的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64813740/