我对react和JavaScript都很陌生，如果能给我一些建议，我将不胜感激。我想使用map((方法迭代一个嵌套数组，如下所示：
const demos = [
{
id : '1',
name: 'name1',
dates: ['jan', 'feb', 'apr']
},
{
id : '2',
name: 'name2',
dates: ['feb', 'may']
}
];
在转到下一个对象之前，我想先用第一个日期映射第一个对象，然后再映射第二个日期，依此类推，然后根据日期对其进行排序，以理想地实现以下输出：
name1: jan
name1: feb
name2: feb
name1: apr
name2: may
到目前为止，我提出的唯一不太有效的解决方案是：
import * as React from 'react';
const demos = [
{id : '1',
name: 'name1',
dates: ['jan', 'feb', 'apr']
},
{id : '2',
name: 'name2',
dates: ['feb', 'may']
}
];
const counts = ['0','1','2'];
export default function Test() {
return (
<div>
{
counts.map(count => (
demos.map(demo =>(
<div key={demo.id}>
<div>{demo.name}: {demo.dates[count]}</div>
</div>
))
))
}
</div>
);
}这给了我以下输出：
name1: jan
name2: feb
name1: feb
name2: may
name1: apr
name2:
使用const counts并不是真正有效的，而且感觉不是正确的开始方式。我如何才能以一种好的方式做到这一点，然后按日期排序？
可以使用如下堆栈片段提供一个可行的代码：
const demos = [
{id : '1',
name: 'name1',
dates: ['jan', 'feb', 'apr']
},
{id : '2',
name: 'name2',
dates: ['feb', 'may']
}
];
// const counts = ['0','1','2'];
function Test() {
const sortHelper = Object.fromEntries(("jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec")
.split(", ").map((m, idx) => ([m, idx])));
const transformArr = arr => (
[...arr].map(({name, dates}) => (
dates.map(month => ({ name, month }))
))
.flat()
.sort((a, b) => (sortHelper[a.month] - sortHelper[b.month]))
);
return (
<div>
{
transformArr(demos).map(({name, month}) => (
<div>{name}: {month}</div>
))
}
</div>
);
}
ReactDOM.render(
<div>
DEMO
<Test />
</div>,
document.getElementById("rd")
);<div id="rd"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>解释
- 为了使用"；一月，二月，三月…十二月"；，创建
sortHelper对象 - 使用
.map和解结构name、dates在阵列上迭代 - 现在，对
dates进行迭代，以创建一个具有两个道具name、month的对象 - 这个物体与预定目标非常相似
- 使用
.flat()删除嵌套数组 - 将
.sort()与sortHelper结合使用以提供必要的订单
已排序
const App = () => {
const demos = [
{ id: "1", name: "name1", dates: ["jan", "feb", "apr"] },
{ id: "2", name: "name2", dates: ["feb", "may"] }
];
const monthIdx = {
jan: 1,
feb: 2,
mar: 3,
apr: 4,
may: 5,
jun: 6,
jul: 7,
aug: 8,
sep: 9,
oct: 10,
nov: 11,
dec: 12
};
const sortedDemo = demos
.map((demo) => {
return demo.dates.map((date) => ({ [demo.name]: date }));
})
.flat()
.sort((a, b) => {
const monthA = Object.values(a)[0];
const monthB = Object.values(b)[0];
return monthIdx[monthA] - monthIdx[monthB];
});
return sortedDemo.map((demo) => {
const [key] = Object.entries(demo);
const [name, date] = key;
return (
<div>
{name} - {date}
</div>
);
});
};
无分拣
const demos = [
{ id: "1", name: "name1", dates: ["jan", "feb", "apr"] },
{ id: "2", name: "name2", dates: ["feb", "may"] }
];
return demos.map((demo) => {
return demo.dates.map((date) => (
<div>
{demo.name} - {date}
</div>
));
});
在中实现以下代码
｛demo.name｝：｛`demo.dates.map((e(=>｛e｝)`}它应该有效也许使用bucket排序会有所帮助：
const demos = [
{ id : '1', name: 'name1', dates: ['jan', 'feb', 'apr'] },
{ id : '2', name: 'name2', dates: ['feb', 'may'] }
];
const month_indexes = {
'jan': 0, 'feb': 1, 'mar': 2, 'apr': 3, 'may': 4, 'jun': 5,
'jul': 6, 'aug': 7, 'oct': 8, 'sep': 9, 'nov': 10, 'dec': 11,
};
const get_sorted_entries = (items) =>
items
.reduce((acc, item) => {
item.dates.forEach((date) => {
// for some reason the below line won't run as acc[month_indexes[date]] ||= [];
acc[month_indexes[date]] = acc[month_indexes[date]] || [];
acc[month_indexes[date]].push([item, date]);
});
return acc;
}, [])
.flat();
const App = () => {
return (
<React.Fragment>
{
get_sorted_entries(demos).map(([item, month]) => (
<div key={item.id + '-' + month}>{item.name}: {month}</div>
))
}
</React.Fragment>
);
};
ReactDOM.render(<App />, document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>这里的数组是由项目数组创建的，顶级数组按月份进行索引。使用flat((按月份取消索引，但保留顺序。