javascript - 在 React 中循环遍历 Map

标签 javascript reactjs typescript

我有一个 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 迭代,对于每个 valuearray,我使用 .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/

相关文章:

javascript - 如何解析嵌套在 bls.gov 列表中的 JSON 以在 React-chartjs-2 中使用

javascript - Chrome react 扩展

javascript - 使用react,从子组件内的ID获取用户名

html - Typescript Enum 组合键值问题

javascript - jquery mobile,使用 .live() 或 .bind() 在导航上执行 ajax 的正确方法

javascript - 在有机会设置重要数据之前就忽略了函数调用

javascript - 如何在 Angular 8/9 中进行全局搜索?

typescript - 在 HTML 文档中嵌入 TypeScript 代码

javascript - JavaScript 中的构造函数

javascript - 抓取所有帖子时如何抓取每个帖子的作者信息?