我有一个 Map
对象:
let dateJobMap = new Map();
for (let jobInArray of this.state.jobs) {
let deliveryDate: Date = new Date(jobInArray.DeliveryDate);
let deliveryDateString: string = deliveryDate.toLocaleDateString("en-US");
if (dateJobMap.has(deliveryDateString)) {
let jobsForDate: IDeliveryJob[] = dateJobMap.get(deliveryDateString);
jobsForDate.push(jobInArray);
}
else {
let jobsForDate: IDeliveryJob[] = [jobInArray];
dateJobMap.set(deliveryDateString, jobsForDate);
}
}
在我的 render
方法中,我想为值数组中的每个交付作业调用一个 TruckJobComp 对象来显示它:
<div className={ styles.column }>
<p className={ styles.description }>{escape(this.props.description)}</p>
{
dateJobMap.forEach(function(jobsForDate, dateString) {
jobsForDate.map(job => (
<TruckJobComp job = { job } />
))
})
}
</div>
这似乎应该有效,但实际上无效。它从不创建 TruckJobComp。我在我的 Map
上做了一个 .forEach
迭代,对于每个 value
的 array
,我使用 .map
获取要发送到 TruckJobComp 对象的单个作业对象。
当我创建一个临时 array
以从最后一个循环中获取作业时:
let tempJobs: IDeliveryJob[];
并在循环中添加:
if (dateJobMap.has(deliveryDateString)) {
let jobsForDate: IDeliveryJob[] = dateJobMap.get(deliveryDateString);
jobsForDate.push(jobInArray);
tempJobs = jobsForDate;
}
然后在渲染中使用那个数组
:
<div className={ styles.column }>
<p className={ styles.description }>{escape(this.props.description)}</p>
{
tempJobs.map(job => (
<TruckJobComp job = { job }/>
))
}
</div>
它按预期显示。
我在 Visual Studio Code 中确实有一个警告:
Warning - tslint - ...\TruckDeliverySchedule.tsx(104,38): error no-function-expression: Use arrow function instead of function expression
我了解的不够深入。第 104 行对应于:
dateJobMap.forEach(function(jobsForDate, dateString) {
我对此很陌生,所以我不能 100% 确定其中大部分是如何工作的。只是想把我学到的东西放在一起让事情发挥作用。
第二次编辑:
{escape(this.props.description)}
{
[...dateJobMap.keys()].map(jobsForDate => // line 154
jobsForDate.map(job => (
<TruckJobComp job = { job } />
))
)
}
产生错误:
[09:06:56] Error - typescript - src\...\TruckDeliverySchedule.tsx(154,27): error TS2461: Type 'IterableIterator<any>' is not an array type.
最佳答案
dateJobMap.forEach(...)
返回 undefined
,因此不能映射到元素集合。
ES6 maps 有 forEach
方法用于兼容性目的(通常 for..of
更适合迭代可迭代对象)并且没有 map
方法。映射应首先转换为数组,然后才能映射到元素。由于不使用值,因此只需要检索键:
{
[...dateJobMap.keys()].map(jobsForDate =>
jobsForDate.map(job => (
<TruckJobComp job = { job } />
))
)
}
关于javascript - 在 React 中循环遍历 Map,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51638508/