javascript - Loopa genom en Map i React

Jag har ett Map-objekt:

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);
  }
}

I min render-metod vill jag anropa ett TruckJobComp-objekt för varje leveransjobb i värdets array för att visa det:

        <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>

Det här verkar som att det borde fungera men gör det inte. Det skapar aldrig en TruckJobComp. Jag gör en .forEach-iteration på min Map, och för varje values array använder jag .map för att få det individuella jobbobjektet som ska skickas till TruckJobComp-objektet.

När jag skapar en temporär array för att fånga jobben från den senaste loopen:

let tempJobs: IDeliveryJob[];

och i loopen lägg till:

  if (dateJobMap.has(deliveryDateString)) {
    let jobsForDate: IDeliveryJob[] = dateJobMap.get(deliveryDateString);
    jobsForDate.push(jobInArray);

    tempJobs = jobsForDate;
  }

och använd sedan den array i renderingen:

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

Det visas som förväntat.

Jag har varningar i Visual Studio Code:

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

Jag vet inte tillräckligt för att förstå. Rad 104 motsvarar:

dateJobMap.forEach(function(jobsForDate, dateString) {

Jag är väldigt ny på det här, så jag är inte 100% säker på hur det mesta av detta fungerar. Försöker bara sätta ihop bitar jag har lärt mig för att få saker att fungera.

Andra redigeringen:

{escape(this.props.description)}

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

Ger fel:

[09:06:56] Error - typescript - src\...\TruckDeliverySchedule.tsx(154,27): error TS2461: Type 'IterableIterator<any>' is not an array type.

Svar #1

dateJobMap.forEach(...) returnerar undefined, så det kan inte mappas till en samling element.

ES6-maps har forEach-metod av kompatibilitetsskäl (generellt föredras for..of för att iterera över itererbara objekt) och har inte map-metod. En map bör först konverteras till en array, sedan kan den mappas till ett element. Eftersom värden inte används, behöver endast nycklar hämtas:

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

Relaterade artiklar