Próbuję dostarczyć listę przedmiotów zamawianych chronologicznie z takim nagłówkiem daty:

enter image description here

Używam poniższego, aby wygenerować ten przykład:

  {this.state.datesarray.map(date => {
    return(
      <div>
      <DateHeader date={date} />
      {this.state.events
        .filter(event => event.date
          .includes(date))
          // .filter(event => event.favourite == 1)
          .map(filteredEvent =>(
            <Events event={filteredEvent} />

          )
        )
      }
      </div>
    )
  })}

To obecnie nie ma problemów. Jeśli jednak chcę filtrować wartość event.favourite == 1 (obecnie komentowany) kończę się z poniższym wynikiem. Nagłówek jest renderowany nawet wtedy, gdy nie ma wyników w kolejnym odwzorowaniu.

Jak mogę zrestrukturyzować to takie, że nagłówek jest również usuwany?

enter image description here

0
TheMightyLlama 13 październik 2020, 17:25

1 odpowiedź

Najlepsza odpowiedź

Problem pojawia się, ponieważ renderując nagłówek daty, następnie filtrując i czasami kręte pustą listę.

Rozwiązaniem byłoby uniknięcie renderowania nagłówka, aż będziesz wiedział, czy masz coś do renderowania ... Niestety, Twój kod będzie musiał zostać zrestrukturyzowany, aby wykonać filtrowanie przed rozpoczęciem renderowania. Coś takiego:

{this.state.datesarray.map(date => {
  // filter the events
  const events = this.state.events
    .filter(event => event.date
      .includes(date))
      // .filter(event => event.favourite == 1)
    );

  // check if there are any events to report
  return events.length > 0
    ? (
          <div>
              <DateHeader date={date} />
              {events.map(filteredEvent => (
                  <Events event={filteredEvent} />
              ))}
          </div>
      )
    : null;
}
1
Kryten 13 październik 2020, 15:36