Question

我有一个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。我在.forEach上进行了Map迭代，对于每个value的{{1}}，我使用array来获取要发送到TruckJobComp的单个作业对象对象。

当我创建临时.map来从上一个循环中获取作业时：

array

并在循环中添加：

let tempJobs: IDeliveryJob[];

，然后在渲染器中使用该if (dateJobMap.has(deliveryDateString)) { let jobsForDate: IDeliveryJob[] = dateJobMap.get(deliveryDateString); jobsForDate.push(jobInArray); tempJobs = jobsForDate; }：

array

它按预期显示。

我在Visual Studio代码中确实有一个警告：

          <div className={ styles.column }>
            <p className={ styles.description }>{escape(this.props.description)}</p>
            {
              tempJobs.map(job => (
                <TruckJobComp job = { job }/>
              ))
            }
          </div>

我不了解。第104行对应于：

Warning - tslint - ...\TruckDeliverySchedule.tsx(104,38): error no-function-expression: Use arrow function instead of function expression

我对此很陌生，所以我不确定100％的工作原理。只是想把我学到的东西放在一起，使事情起作用。

第二次修改：

{escape（this.props.description）}

dateJobMap.forEach(function(jobsForDate, dateString) {

产生错误：

{
  [...dateJobMap.keys()].map(jobsForDate => // line 154
    jobsForDate.map(job => (
      <TruckJobComp job = { job } />
    ))
  )
}

Answer 1

dateJobMap.forEach(...)返回undefined，因此无法将其映射到元素集合。

出于兼容性目的，ES6映射具有forEach方法（通常优先使用for..of来迭代可迭代对象），并且没有map方法。映射应该先转换为数组，然后才能映射到元素。由于不使用值，因此只需要检索键：

  {
    [...dateJobMap.keys()].map(jobsForDate =>
      jobsForDate.map(job => (
        <TruckJobComp job = { job } />
      ))
    )
  }

Answer 2

所有这些警告是说，应该使用语法function(jobsForDate, dateString) {}而不是使用语法(jobsForDate, dateString) => {}。

原因可能是this在箭头函数和函数表达式中的作用域。参见this post.

我对您第一种方法不起作用但第二种方法起作用的原因的猜测是，forEach实际上没有返回数组，如果可以，则在{{ 1}}将返回一个数组数组（但同样，它不会）。不确定React将如何处理，但是React确实知道如何处理单个数组，这是您最后一种方法返回的结果。

在React中循环遍历地图

2 个答案: