遍历对象数组并在react组件中显示它们

Question

我有一个如下的对象数组。数据基于created_date，例如(" 20121-09-12 ")

如你所见，我有最近5天的数据。即9月12日、9月11日、9月10日、9月9日和9月8日。回复中没有9月11日和9月8日的任何数据

const buildData = [
{
"project_id": "1H16SET9829",
"created_date": "2021-09-12",
"status": "P"
},
{
"project_id": "1J01SET10974",
"created_date": "2021-09-10",
"status": "F"
},
{
"project_id": "1J01SET10971",
"created_date": "2021-09-09",
"status": "P"
},
{
"project_id": "1J01SET10969",
"created_date": "2021-09-09",
"status": "F"
}
]

基于上述信息，我必须使用react功能组件在UI中显示数据，如下所示

Sep 12, 2021  | Sep 11,2021 |   Sep 10, 2021   |   Sep 09, 2021    | Sep 08, 2021
1H16SET9829 (P) |             | 1J01SET10974 (F) | 1J01SET10971 (P)  |
|             |                  | 1J01SET10971 (F)  |

有人能告诉我如何实现这一点吗?我尝试了以下，但它没有显示正确的数据。我不知道如何显示正确的project_id低于其日期。也有些日期有2个project_ids在它。例如，2021年9月9日有2个project_id，都需要显示在另一个的下面，然后继续下一个日期。

const renderProjects = (props) => {
const items = buildData.map( (t, idx) => (
<>
<div>{ t.created_date }</div>
<div>{t.project_id</div>
</>
))
return (
<div className="project-list">
{ items }
</div>
)
}

Answer 1

你可以这样做(见内联注释):

const buildData = [
{
project_id: '1H16SET9829',
created_date: '2021-09-12',
status: 'P',
},
{
project_id: '1J01SET10974',
created_date: '2021-09-10',
status: 'F',
},
{
project_id: '1J01SET10971',
created_date: '2021-09-09',
status: 'P',
},
{
project_id: '1J01SET10969',
created_date: '2021-09-09',
status: 'F',
},
];
export const RenderProjects = (props) => {
// convert the buildData into a map from date -> list of `{project_id, status}`s
const buildDataByDate = buildData.reduce((map, project) => {
const projectInfo = {
project_id: project.project_id,
status: project.status,
};
if (!map[project.created_date]) {
map[project.created_date] = [projectInfo];
} else {
map[project.created_date].push(projectInfo);
}
return map;
}, {});

// find the first and last dates
const minDate = Object.keys(buildDataByDate).sort()[0];
const maxDate = Object.keys(buildDataByDate).sort().reverse()[0];
// find how many days are between them
const daysBetween =
(Date.parse(maxDate) - Date.parse(minDate)) / (24 * 60 * 60 * 1000);
// add in the missing dates
[...Array(daysBetween).keys()].forEach((increment) => {
const dateToAdd = new Date(
Date.parse(minDate) + increment * 24 * 60 * 60 * 1000,
)
.toISOString()
.substring(0, 10);
if (!buildDataByDate[dateToAdd]) {
buildDataByDate[dateToAdd] = [];
}
});
// render something for each entry in that map
const items = Object.entries(buildDataByDate)
.sort((a, b) => {
return Date.parse(b[0]) - Date.parse(a[0]);
})
.map(([date, projects]) => {
return (
<React.Fragment key={date}>
<div>{date}</div>
{projects.map((project) => {
return (
<div
key={project.project_id}
>{`${project.project_id} (${project.status})`}</div>
);
})}
</React.Fragment>
);
});
return <div className='project-list'>{items}</div>;
};